├── src ├── js │ └── script.js ├── _partials │ └── header.pug ├── _data │ └── index.pug.json ├── sass │ ├── style.scss │ └── includes │ │ └── _base.scss ├── index.pug └── _layouts │ └── home.pug ├── .gitignore ├── .travis.yml ├── package.json ├── LICENSE ├── README.md └── gulpfile.js /src/js/script.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/_partials/header.pug: -------------------------------------------------------------------------------- 1 | header 2 | h1= welcome -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | .sass-cache 4 | *.thumb 5 | npm-debug.log 6 | public/ -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - node 5 | - 6 6 | 7 | script: npm run build -------------------------------------------------------------------------------- /src/_data/index.pug.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Pug-Sass Starter", 3 | "welcome": "Gulp Pug Sass Starter", 4 | "link": "github.com/azemoh" 5 | } -------------------------------------------------------------------------------- /src/sass/style.scss: -------------------------------------------------------------------------------- 1 | @import "includes/base"; 2 | 3 | header { 4 | h1 { 5 | font-weight: 300; 6 | text-align: center; 7 | font-size: 60px; 8 | margin-top: 180px; 9 | } 10 | } -------------------------------------------------------------------------------- /src/index.pug: -------------------------------------------------------------------------------- 1 | extends _layouts/home 2 | 3 | block head_end 4 | link(rel="stylesheet" href="/css/style.css") 5 | 6 | block content 7 | include _partials/header 8 | 9 | block body_end 10 | script(type="text/javascript" src="/js/script.js") -------------------------------------------------------------------------------- /src/_layouts/home.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | title= title 5 | meta(charset="utf-8") 6 | meta(name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1") 7 | block head_end 8 | 9 | body 10 | block content 11 | 12 | script(type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js") 13 | block body_end -------------------------------------------------------------------------------- /src/sass/includes/_base.scss: -------------------------------------------------------------------------------- 1 | /* FONTS 2 | ------------------------*/ 3 | 4 | @import url(https://fonts.googleapis.com/css?family=Raleway:400,700); 5 | 6 | /* TYPOGRAPHY 7 | –––––––––––––––––––––––––––*/ 8 | 9 | body { 10 | font-family: 'Raleway', Arial, sans-serif, ; 11 | color: #555; 12 | font-size: 100%; 13 | line-height: 1.5; 14 | background-color: #f2f2f2; 15 | margin: 0; 16 | } 17 | 18 | 19 | /* ------ Normalize ----- */ 20 | 21 | *, 22 | *:after, 23 | *:before { 24 | box-sizing: border-box; 25 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-pug-sass-starter", 3 | "version": "1.0.0", 4 | "description": "A Pug and Sass starter project using gulp for task automation.", 5 | "main": "gulpfile.js", 6 | "author": "Joshua Azemoh (http://azemoh.com)", 7 | "scripts": { 8 | "start": "gulp", 9 | "build": "gulp build", 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "devDependencies": { 13 | "browser-sync": "^2.9.3", 14 | "gulp": "^3.9.0", 15 | "gulp-autoprefixer": "^3.0.1", 16 | "gulp-data": "^1.2.0", 17 | "gulp-pug": "^3.0.3", 18 | "gulp-sass": "^2.0.4" 19 | }, 20 | "repository": { 21 | "type": "git", 22 | "url": "https://github.com/azemoh/gulp-pug-sass-seed.git" 23 | }, 24 | "keywords": [ 25 | "jade", 26 | "gulp", 27 | "pug", 28 | "sass", 29 | "browsersync" 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Joshua Azemoh 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Pug-Sass Starter project. 2 | 3 | [![Build Status][travis-image]][travis-url] 4 | 5 | This is a Pug and Sass starter project using gulp for task automation. 6 | 7 | ### Note 8 | If you still need Jade support use [this](https://github.com/azemoh/gulp-jade-sass-starter) project instead. 9 | 10 | This project uses... 11 | 12 | 1. [browser-sync](https://github.com/browsersync/browser-sync) to launch a local server and do live reloads as sass and pug files changes 13 | 2. [gulp-pug](https://github.com/jamen/gulp-pug) to compile pug files. 14 | 3. [gulp-data](https://github.com/colynb/gulp-data) to pass data to pug. this project uses JSON as the data source, however you can generate data objects from a variety of sources: json, front-matter, database, etc... see gulp-data [README](https://github.com/colynb/gulp-data) 15 | 4. [gulp-sass](https://github.com/dlmanning/gulp-sass) to compile sass files. 16 | 5. [gulp-autoprefixer](https://github.com/sindresorhus/gulp-autoprefixer) to add vendor prefixes to css files 17 | 18 | ### To run 19 | - Execute `npm install` from this directory to install dev dependencies. 20 | - Execute `gulp` to run all tasks, launch the browser sync local server and watch for changes. 21 | 22 | [travis-url]: https://travis-ci.org/azemoh/gulp-pug-sass-seed 23 | [travis-image]: https://travis-ci.org/azemoh/gulp-pug-sass-seed.svg -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | /*global require*/ 2 | "use strict"; 3 | 4 | var gulp = require('gulp'), 5 | path = require('path'), 6 | data = require('gulp-data'), 7 | pug = require('gulp-pug'), 8 | prefix = require('gulp-autoprefixer'), 9 | sass = require('gulp-sass'), 10 | browserSync = require('browser-sync'); 11 | 12 | /* 13 | * Directories here 14 | */ 15 | var paths = { 16 | public: './public/', 17 | sass: './src/sass/', 18 | css: './public/css/', 19 | data: './src/_data/' 20 | }; 21 | 22 | /** 23 | * Compile .pug files and pass in data from json file 24 | * matching file name. index.pug - index.pug.json 25 | */ 26 | gulp.task('pug', function () { 27 | return gulp.src('./src/*.pug') 28 | .pipe(data(function (file) { 29 | return require(paths.data + path.basename(file.path) + '.json'); 30 | })) 31 | .pipe(pug()) 32 | .on('error', function (err) { 33 | process.stderr.write(err.message + '\n'); 34 | this.emit('end'); 35 | }) 36 | .pipe(gulp.dest(paths.public)); 37 | }); 38 | 39 | /** 40 | * Recompile .pug files and live reload the browser 41 | */ 42 | gulp.task('rebuild', ['pug'], function () { 43 | browserSync.reload(); 44 | }); 45 | 46 | /** 47 | * Wait for pug and sass tasks, then launch the browser-sync Server 48 | */ 49 | gulp.task('browser-sync', ['sass', 'pug'], function () { 50 | browserSync({ 51 | server: { 52 | baseDir: paths.public 53 | }, 54 | notify: false 55 | }); 56 | }); 57 | 58 | /** 59 | * Compile .scss files into public css directory With autoprefixer no 60 | * need for vendor prefixes then live reload the browser. 61 | */ 62 | gulp.task('sass', function () { 63 | return gulp.src(paths.sass + '*.scss') 64 | .pipe(sass({ 65 | includePaths: [paths.sass], 66 | outputStyle: 'compressed' 67 | })) 68 | .on('error', sass.logError) 69 | .pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { 70 | cascade: true 71 | })) 72 | .pipe(gulp.dest(paths.css)) 73 | .pipe(browserSync.reload({ 74 | stream: true 75 | })); 76 | }); 77 | 78 | /** 79 | * Watch scss files for changes & recompile 80 | * Watch .pug files run pug-rebuild then reload BrowserSync 81 | */ 82 | gulp.task('watch', function () { 83 | gulp.watch(paths.sass + '**/*.scss', ['sass']); 84 | gulp.watch('./src/**/*.pug', ['rebuild']); 85 | }); 86 | 87 | // Build task compile sass and pug. 88 | gulp.task('build', ['sass', 'pug']); 89 | 90 | /** 91 | * Default task, running just `gulp` will compile the sass, 92 | * compile the jekyll site, launch BrowserSync then watch 93 | * files for changes 94 | */ 95 | gulp.task('default', ['browser-sync', 'watch']); 96 | --------------------------------------------------------------------------------