I'm having issues trying to generate sourcemaps for my CSS files.
My current stack is:
Gulp
Stylus
Autoprefixer
There are two compiling steps:
Gulp pre-compiles to CSS;
Autoprefixer post-compiles the CSS to add browser vendor prefixes;
I can't generate the sourcemaps on the first compilation, as the second one will add new lines to the CSS, and I'm quite lost on how to make them "talk" with each other.
This is what I got so far.
var gulp = require('gulp');
var paths = {
src: 'src',
dist: 'dist'
};
// ---------------------------------------
// STYLUS
var stylus = require('gulp-stylus');
var rename = require('gulp-rename');
gulp.task('stylus', ['clean:css'], function () {
return gulp.src(paths.src + '/stylus/*.styl')
.pipe(stylus({
compress: true,
sourcemap: {
inline: true,
sourceRoot: '.',
basePath: paths.dist + '/css'
}
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest(paths.dist + '/css'));
});
// ---------------------------------------
// BROWSERSYNC
var browserSync = require('browser-sync');
// Sets up a static server
gulp.task('browser-sync', function() {
return browserSync({
server: {
baseDir: './'
}
});
});
// ---------------------------------------
// AUTOPREFIXER
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
gulp.task('autoprefixer', ['stylus'], function () {
return gulp.src(paths.dist + '/css/*.css')
.pipe(autoprefixer())
.pipe(sourcemaps.init({
loadMaps: true
}))
.pipe(sourcemaps.write('.', {
includeContent: false,
sourceRoot: '.'
}))
.pipe(gulp.dest(paths.dist + '/css'))
.pipe(browserSync.reload({stream:true}));
});
// ---------------------------------------
// CLEAN
var del = require('del');
gulp.task('clean:css', function (cb) {
return del([
paths.dist + '/**/*.css',
paths.dist + '/**/*.map'
], cb);
});
// ---------------------------------------
// WATCH
gulp.task('watch', ['browser-sync'], function() {
gulp.watch(paths.src + '/stylus/**/*.styl', ['clean:css', 'stylus', 'autoprefixer']);
gulp.watch('*.html', ['compress', browserSync.reload]);
});
Related
i have a problem with at localhost. I use gulp server for my project and i want to display img but when i use localhost it doesn't display but when i open my index.html file it works fine
<img src="src/img/logo.png" alt="Logo">
I can't find a good src to display it. How it should looks like?
edit:
my gulpfile is:
const gulp = require("gulp");
const sass = require("gulp-sass");
const sourcemaps = require('gulp-sourcemaps');
var connect = require('gulp-connect');
gulp.task('connect', function(cb) {
connect.server({
root: './dist',
livereload: true
});
cb();
});
gulp.task("sass", function() {
return gulp.src('./src/scss/main.scss')
.pipe(sourcemaps.init())
.pipe(sass({errLogToConsole: true}))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./dist/css'))
.pipe(connect.reload());
});
gulp.task('html', function () {
return gulp.src('./src/*.html')
.pipe(gulp.dest('./dist'))
.pipe(connect.reload());;
});
gulp.task('watch', function () {
gulp.watch('./src/scss/**/*.scss', gulp.series('sass'));
gulp.watch('./src/**/*.html', gulp.series('html'));
});
gulp.task('default', gulp.series('connect', 'watch'));
Based on your gulp configuration your HTML files from src are moved (Part 1) into your ./dist/ folder and then served from there (Part 2). So move your index.html into src and remove it from the img tag.
Moving HTML to dist folder (Part 1):
gulp.task('html', function () {
return gulp.src('./src/*.html')
.pipe(gulp.dest('./dist'))
.pipe(connect.reload());;
});
Gulp server on dist folder (Part 2):
gulp.task('connect', function(cb) {
connect.server({
root: './dist',
livereload: true
});
cb();
});
So what you need is either a task that moves your images as well or the easy way:
Create a img folder in dist containing the image and change the path in your index.html as follows:
<img src="img/logo.png" alt="Logo">
I would recommend to change your gulp config, so it serves from your src folder for development and create a second task for a build process (Including minify css, js and moving the files). I just add a config that i used some time ago:
var gulp = require('gulp');
var sass = require('gulp-sass');
var browsersync = require("browser-sync").create();
var babel = require('gulp-babel');
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var plumber = require('gulp-plumber');
var cssnano = require('gulp-cssnano');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var rev = require('gulp-rev');
var revdel = require('rev-del');
var collect = require('gulp-rev-collector');
// Development Tasks
// -----------------
// BrowserSync
function browserSync(done) {
browsersync.init({
server: {
baseDir: "./src/"
},
port: 3000
});
done();
}
// BrowserSync Reload
function browserSyncReload(done) {
browsersync.reload();
done();
}
// Watchers
function watchFiles(){
gulp.watch('src/scss/**/*.scss', gulp.series('sassify', browserSyncReload));
gulp.watch('src/*.html', gulp.series(browserSyncReload));
gulp.watch('src/js/**/*.js', gulp.series(browserSyncReload));
}
// Optimization Tasks
// ------------------
// Sassify
gulp.task('sassify', (cb) => {
gulp.src('src/scss/**/*.scss') // Gets all files ending with .scss in src/scss and children dirs
.pipe(plumber())
.pipe(sass()) // Passes it through a gulp-sass, log errors to console
.pipe(gulp.dest('src/css')) // Outputs it in the css folder
.pipe(browsersync.stream());
cb();
});
// Optimizing CSS
gulp.task('css', (done) => {
gulp.src('src/css/*.css')
.pipe(plumber())
.pipe(cssnano())
.pipe(gulp.dest('dist/css'));
done();
});
// Optimizing JS
gulp.task('js', (cb) => {
gulp.src('src/js/*.js')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(babel({
presets: ['#babel/env']
}))
.pipe(uglify())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/js'));
cb();
});
// HTML
gulp.task('html', (cb) => {
gulp.src('src/*.html')
.pipe(gulp.dest('dist'));
cb();
});
// Optimizing Images
gulp.task('images', function(done) {
gulp.src('src/assets/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true,
})))
.pipe(gulp.dest('dist/assets'))
done();
});
// Generate Revisions...
gulp.task('revision:rename', function(){
gulp.src(["dist/**/*.css",
"dist/**/*.js"])
.pipe(rev())
.pipe(revdel())
.pipe(gulp.dest('dist'))
.pipe(rev.manifest({ path: 'manifest.json' }))
.pipe(gulp.dest('dist'))
});
// update references
gulp.task('revision:updateReferences', function(){
gulp.src(['dist/manifest.json','dist/**/*.{html,json,css,js}'])
.pipe(collect())
.pipe(gulp.dest('dist'))
});
// Cleaning
gulp.task('clean', function() {
return del.sync('dist').then(function(cb) {
return cache.clearAll(cb);
});
})
gulp.task('clean:dist', (cb) => {
del.sync(['dist/**/*', '!dist/assets', '!dist/assets/**/*']);
cb();
});
// Build Sequences
// ---------------
gulp.task('default',
gulp.series(
'sassify',
gulp.parallel(
watchFiles,
browserSync
)
)
);
gulp.task('build',
gulp.series(
'clean:dist',
'sassify',
gulp.parallel(
'css',
'js',
'images'
),
'html'
)
);
I had a simple javascript webpage and used gulp 3. Now (as I understand) node 10 crashes with gulp 3 so that ive upgraded to gulp 4. I have a very limited knowledge about gulp and read tutorials now on how to upgrade and I am still getting error: Task function must be specified.
Any help would be great. thanks!!
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var uglify = require('gulp-uglify');
var cache = require('gulp-cache');
var imagemin = require('gulp-imagemin');
// Compiles SCSS files from /scss into /css
gulp.task('sass', function (done) {
gulp.src('app/scss/styles.scss')
.pipe(sass())
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
done()
});
// Minify compiled CSS
gulp.task('minify-css', ['sass'], function (done) {
gulp.src('app/css/styles.css')
.pipe(cleanCSS({
compatibility: 'ie8'
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
done()
});
// Minify custom JS
gulp.task('minify-js', function (done) {
gulp.src('app/js/index.js')
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('js'))
.pipe(browserSync.reload({
stream: true
}))
done()
});
// Copy vendor files from /node_modules into /vendor
gulp.task('copy', function (done) {
gulp.src([
'node_modules/bootstrap/dist/**/*',
'!**/npm.js',
'!**/bootstrap-theme.*',
'!**/*.map'
])
.pipe(gulp.dest('vendor/bootstrap'))
gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
.pipe(gulp.dest('vendor/jquery'))
gulp.src(['node_modules/jquery-easing/*.js'])
.pipe(gulp.dest('vendor/jquery-easing'))
/*gulp.src(['node_modules/waypoints/lib/jquery.waypoints.js'])
.pipe(gulp.dest('vendor/waypoint'))*/
gulp.src(['node_modules/animate.css/animate.css'])
.pipe(gulp.dest('vendor/animate'))
/* gulp.src(['node_modules/scrollreveal/dist/scrollreveal.js'])
.pipe(gulp.dest('vendor/scrollreveal'))*/
done()
})
// Optimizing Images
gulp.task('images', function(done) {
gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true,
})))
.pipe(gulp.dest('dist/images'));
done()
});
// Default task
/*gulp.task('default', ['sass', 'minify-css', 'minify-js', 'copy']);*/
gulp.task('default', gulp.series('sass', 'minify-css', 'minify-js', 'copy'));
// Configure the browserSync task
gulp.task('browserSync', function (done) {
browserSync.init({
server: {
baseDir: ''
},
port: process.env.PORT || 8080
});
done()
})
// Dev task with browserSync
//old:
/*
gulp.task('dev', ['browserSync', 'sass', 'minify-css', 'minify-js', 'images'], function () {
gulp.watch('scss/!*.scss', ['sass']);
gulp.watch('css/!*.css', ['minify-css']);
gulp.watch('js/!*.js', ['minify-js']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('*.html', browserSync.reload);
gulp.watch('js/!**!/!*.js', browserSync.reload);
});*/
//new
gulp.task('watch', function(){
gulp.watch('app/scss/*.scss')
.on('change', function(path, stats) {
console.log('File ' + path + ' was changed');
}).on('unlink', function(path) {
console.log('File ' + path + ' was removed');
});
});
When converting to gulp 4, all Task arrays:
gulp.task('minify-css', ['sass'], function (done) {
should be using series:
gulp.task('minify-css', gulp.series('sass', function (done) {
final file:
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var uglify = require('gulp-uglify');
var cache = require('gulp-cache');
var imagemin = require('gulp-imagemin');
// Compiles SCSS files from /scss into /css
gulp.task('sass', function (done) {
gulp.src('app/scss/styles.scss')
.pipe(sass())
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
done()
});
// Minify compiled CSS
gulp.task('minify-css', gulp.series('sass', function (done) {
gulp.src('app/css/styles.css')
.pipe(cleanCSS({
compatibility: 'ie8'
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
done()
}));
// Minify custom JS
gulp.task('minify-js', function (done) {
gulp.src('app/js/index.js')
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('js'))
.pipe(browserSync.reload({
stream: true
}))
done()
});
// Copy vendor files from /node_modules into /vendor
gulp.task('copy', function (done) {
gulp.src([
'node_modules/bootstrap/dist/**/*',
'!**/npm.js',
'!**/bootstrap-theme.*',
'!**/*.map'
])
.pipe(gulp.dest('vendor/bootstrap'))
gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
.pipe(gulp.dest('vendor/jquery'))
gulp.src(['node_modules/jquery-easing/*.js'])
.pipe(gulp.dest('vendor/jquery-easing'))
/*gulp.src(['node_modules/waypoints/lib/jquery.waypoints.js'])
.pipe(gulp.dest('vendor/waypoint'))*/
gulp.src(['node_modules/animate.css/animate.css'])
.pipe(gulp.dest('vendor/animate'))
/* gulp.src(['node_modules/scrollreveal/dist/scrollreveal.js'])
.pipe(gulp.dest('vendor/scrollreveal'))*/
done()
})
// Optimizing Images
gulp.task('images', function(done) {
gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true,
})))
.pipe(gulp.dest('dist/images'));
done()
});
// Default task
/*gulp.task('default', ['sass', 'minify-css', 'minify-js', 'copy']);*/
gulp.task('default', gulp.series('sass', 'minify-css', 'minify-js', 'copy'));
// Configure the browserSync task
gulp.task('browserSync', function (done) {
browserSync.init({
server: {
baseDir: ''
},
port: process.env.PORT || 8080
});
done()
})
// Dev task with browserSync
//old:
/*
gulp.task('dev', ['browserSync', 'sass', 'minify-css', 'minify-js', 'images'], function () {
gulp.watch('scss/!*.scss', ['sass']);
gulp.watch('css/!*.css', ['minify-css']);
gulp.watch('js/!*.js', ['minify-js']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('*.html', browserSync.reload);
gulp.watch('js/!**!/!*.js', browserSync.reload);
});*/
//new
gulp.task('watch', function(){
gulp.watch('app/scss/*.scss')
.on('change', function(path, stats) {
console.log('File ' + path + ' was changed');
}).on('unlink', function(path) {
console.log('File ' + path + ' was removed');
});
});
watch task:
gulp.task('watch', function (done) {
gulp.watch('scss/*.scss', gulp.series('sass'));
gulp.watch('css/!*.css', gulp.series('minify-css'));
gulp.watch('js/!*.js', gulp.series('minify-js'));
// Reloads the browser whenever HTML or JS files change
gulp.watch('*.html', browserSync.reload);
gulp.watch('js/!**/!*.js', browserSync.reload);
return
});
I tried using function instead gulp.task() and it worked for me. I found this solution in a youtube video
// compile scss into css
function style() {
// 1. where is my scss file
return gulp.src('./app/scss/**/*.scss')
// 2. pass that file through sass compiler
.pipe(sass().on('error', sass.logError))
// 3. where do I save the compiled CSS?
.pipe(gulp.dest('./app/css'))
// 4. stream changes to all browser
.pipe(browserSync.stream());
}
function watch() {
gulp.watch('./app/scss/**/*.scss', style);
gulp.watch('./app/**/*.html').on('change', browserSync.reload);
gulp.watch('./app/js/**/*.js').on('change', browserSync.reload);
}
exports.style = style;
exports.watch = watch;
I'm using Zurb panini to do templating and construct pages. I'm not sure where I did wrong. Now if I update my scss files, the BrowserSync will reload and the update will show. But it just doesn't work when I update html files. Could anyone help me to take a look my Gulp config? Thx~
var gulp = require('gulp');
var panini = require('panini');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var autoprefixer = require('autoprefixer-core');
var clean = require('gulp-clean');
gulp.task('copy', function() {
return gulp.src('./src/assets/icon/*')
.pipe(gulp.dest('./dist/assets/icon'));
});
gulp.task('sass', function(){
var processors = [
autoprefixer({browsers:['last 2 versions']})
];
return gulp.src('./src/assets/sass/*.scss')
.pipe(sass())
.pipe(concat('style.css'))
.pipe(gulp.dest('./dist/assets'))
});
gulp.task('clean', function () {
return gulp.src('./dist/*.html', {read: false})
.pipe(clean());
});
gulp.task('pages', function() {
return gulp.src('src/pages/**/*.html')
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
}))
.pipe(concat('index.html'))
.pipe(gulp.dest('./dist'));
});
gulp.task('browserSync', function(){
browserSync.init({
server: "./dist"
});
});
gulp.task('watch', function(){
gulp.watch(['./src/{layouts,partials}/**/*'], [panini.refresh]);
gulp.watch("./src/assets/sass/**/*.scss", ['sass']).on('change', browserSync.reload);
gulp.watch("./src/**/*.html").on('change', browserSync.reload);
});
gulp.task('build', ['clean', 'copy', 'sass', 'pages']);
gulp.task('default', ['build', 'watch', 'browserSync']);
//gulp 4.0.2 panini 1.6.3
gulp.task('compile-html', function(){
var paniniOption = {
root: 'src/html/pages/',
layouts: 'src/html/layouts/',
partials: 'src/html/includes/',
helpers: 'src/html/helpers/',
data: 'src/html/data/'
}
return gulp.src('src/html/pages/**/*.html')
.pipe(panini(paniniOption))
.pipe(gulp.dest('_site'));
});
gulp.watch('src/html/pages/**/*').on('change', gulp.series('compile-html', browserSync.reload));
gulp.watch('src/html/{layouts,includes,helpers,data}/**/*').on('change', gulp.series(async () => { await panini.refresh() }, 'compile-html', browserSync.reload));
Html file is synchronize and working, but CSS file not. Gulp and Browser sync are working too and not giving any error. I've read a documentation from official BrowserSync website but it doesn't work. Please help me. Here's my gulpfile.js file:
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
var gulp = require('gulp');
// POST CSS PLUGINS
var postcss = require('gulp-postcss');
var mixins = require('postcss-mixins');
var postcssimport = require('postcss-partial-import');
var nested = require('postcss-nested');
var vars = require('postcss-simple-vars');
var lost = require('lost');
var rucksack = require('rucksack-css');
var cssnano = require('cssnano');
var autoprefixer = require('autoprefixer');
var mqpacker = require('css-mqpacker');
// OTHER PLUGINS
var pug = require('gulp-pug');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync');
// POSTCSS TASK
gulp.task('css', function() {
var plugins = [
autoprefixer({
browsers: ['last 2 version']
}),
rucksack({
alias: false,
easings: false,
inputPseudo: false
}),
lost,
mixins,
postcssimport,
nested,
vars,
mqpacker
// cssnano uncomment this when you need to minify .css files
];
return gulp.src('app/styles/*.css')
.pipe(plumber())
.pipe(postcss(plugins))
.pipe(plumber.stop())
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.stream());
});
// PUG TASK
gulp.task('pug', function(){
return gulp.src('app/pug/*.pug')
.pipe(plumber())
.pipe(pug({
pretty: true // Don't minify .html files
}))
.pipe(plumber.stop())
.pipe(gulp.dest('app'))
});
// IMAGE MINIFICATION TASK
gulp.task('img-min', function() {
gulp.src('app/images/**/*')
.pipe(imagemin({
interlaced: true,
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest('dist/img'))
});
// BROWSER SYNC TASK
gulp.task('browserSync', ['css'], function() {
browserSync.init({
server: './app',
open: false,
notify: false,
logPrefix: 'ʕ•ᴥ•ʔ'
});
});
// WATCHING FILE TASK
gulp.task('watch', ['browserSync', 'css', 'pug', 'img-min'], function() {
gulp.watch("app/*.html").on('change', browserSync.reload);
gulp.watch("app/styles/*.css", ['css'], browserSync.reload);
gulp.watch('app/pug/**/*.pug', ['pug']);
});
gulp.task('default', ['watch']);
I'm trying to give Gulp a try for the first time and can't figure out why is taking so long in loading packages and running tasks, about 48 seconds every time. Not sure how many packages are the average, but I think I need all of them. I've been trying to improve the performance by following some examples but I'm stuck in the same place.
I'd really appreciate any piece of advice!
This is my gulpfile.js:
var gulp = require('gulp'),
runSequence = require('run-sequence'),
templateCache = require('gulp-angular-templatecache'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
rename = require("gulp-rename")
browserify = require('browserify'),
concat = require('gulp-concat'),
addStream = require('add-stream'),
source = require('vinyl-source-stream'),
buffer = require('vinyl-buffer'),
imagemin = require('gulp-imagemin'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
ngAnnotate = require('gulp-ng-annotate'),
uglify = require('gulp-uglify'),
jshint = require('gulp-jshint'),
htmlmin = require('gulp-html-minifier'),
del = require('del');
function templates() {
return gulp.src('./app/views/**/*.html')
.pipe(templateCache({
module: 'portfolio'
}));
}
gulp.task('clean:dist', function() {
return del.sync('dist/assets/');
});
gulp.task('jshint', function() {
return gulp.src('./app/js/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
});
gulp.task('browserify', function() {
return browserify('./app/app.js')
.bundle()
.pipe(source('main.js'))
.pipe(buffer())
.pipe(ngAnnotate())
.pipe(addStream.obj(templates()))
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('./dist/assets/js/'))
});
gulp.task('sass', function() {
return gulp.src('./app/css/main.scss')
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(autoprefixer())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('./dist/assets/css'))
});
gulp.task('images', function() {
return gulp.src('./app/img/**/*.{png,jpg,gif,svg}')
.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
.pipe(gulp.dest('./dist/assets/img'))
});
gulp.task('copyfonts', function() {
gulp.src('./app/css/fonts/**/*.*')
.pipe(gulp.dest('./dist/assets/fonts'));
});
gulp.task('copy-index-html', function() {
gulp.src('./app/index.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('./dist'));
});
gulp.task('serve', function() {
browserSync({
server: {
baseDir: './dist'
}
});
gulp.watch('app/js/**/*.js', ['browserify', reload]);
gulp.watch('app/css/**/*.scss', ['sass', reload]);
gulp.watch('app/views/**/*.html', [reload]);
});
gulp.task('bs-reload', function () {
browserSync.reload();
});
gulp.task('default', function(callback) {
runSequence('clean:dist', 'jshint', ['browserify', 'sass', 'images','copy-index-html','copyfonts'], 'serve', callback);
});
Gulp performance (image link)