Skip to content

Instantly share code, notes, and snippets.

@claycarpenter
Last active August 23, 2018 15:35
Show Gist options
  • Save claycarpenter/07a9f346ec7fff596f16 to your computer and use it in GitHub Desktop.
Save claycarpenter/07a9f346ec7fff596f16 to your computer and use it in GitHub Desktop.
Gulp build script with Sass, Jade, BrowserSync integration.
// Define project paths.
// Note: all of these are relative to the project root.
var projectPaths = {
scssSources: 'src/scss',
outputRoot: 'output'
};
// Import required dependencies.
var gulp = require('gulp'),
browserSync = require('browser-sync'),
browserSyncReload = browserSync.reload,
sass = require('gulp-sass'),
filter = require('gulp-filter'),
concat = require('gulp-concat'),
jade = require('gulp-jade');
var browserSyncConfig = {
server: {
baseDir: './' + projectPaths.outputRoot
},
files: [
projectPaths.outputRoot + '/css/*.css',
projectPaths.outputRoot + '/*.html',
projectPaths.outputRoot + '/js/*.js'
]
};
gulp.task('sass', function() {
return gulp.src(projectPaths.scssSources + '/*.scss')
.pipe(sass())
.pipe(gulp.dest(projectPaths.outputRoot + '/css'))
.pipe(filter('**/*.css'))
.pipe(browserSyncReload({stream: true}));
});
gulp.task('browser-sync', function() {
browserSync(browserSyncConfig);
});
gulp.task('jade-compile', function () {
gulp.src('./src/jade/**/*.jade')
.pipe(jade({pretty: true}))
.pipe(gulp.dest('./output/'));
});
gulp.task('copy-html', function() {
gulp.src(['./src/html/**/*.html'])
.pipe(gulp.dest('./output/'));
});
gulp.task('watch', function() {
gulp.watch(projectPaths.scssSources + '/*.scss', ['sass']);
gulp.watch('src/jade/**/*.jade', ['jade-compile']);
gulp.watch('src/html/**/*.html', ['copy-html']);
});
gulp.task('default',
['sass', 'jade-compile', 'copy-html', 'browser-sync', 'watch']);
{
"name": "gulp-browsersync-jade",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "MIT",
"dependencies": {
"browser-sync": "^2.6.5",
"gulp": "^3.8.11",
"gulp-concat": "^2.5.2",
"gulp-filter": "^2.0.2",
"gulp-jade": "^1.0.0",
"gulp-sass": "^1.3.3"
},
"devDependencies": {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment