'use strict'; var gulp = require('gulp'); var $ = require('gulp-load-plugins')(); var bowerFiles = require('main-bower-files'); var del = require('del'); var browserSync = require('browser-sync'); var reload = browserSync.reload; gulp.task('styles', function () { return gulp.src('app/styles/main.scss') .pipe($.plumber()) .pipe($.sass.sync({ outputStyle: 'expanded', precision: 10, includePaths: ['.'] }).on('error', $.sass.logError)) .pipe($.autoprefixer({browsers: ['last 1 version']})) .pipe(gulp.dest('.tmp/styles')) .pipe(reload({stream: true})); }); gulp.task('scripts', function () { return gulp.src('app/scripts/**/*.js') .pipe($.jshint()) .pipe($.jshint.reporter(require('jshint-stylish'))) }); gulp.task('html', ['styles', 'scripts'], function () { return gulp.src('app/*.html') .pipe($.useref({searchPath: '{.tmp,app}'})) .pipe($.if('*.js', $.uglify())) .pipe($.if('*.css', $.minifyCss({compatibility: '*'}))) .pipe($.if('*.css', $.uncss(({html: ['app/index.html']})))) .pipe(gulp.dest('dist')); }); gulp.task('images', function () { return gulp.src('app/images/**/*') .pipe($.imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })) .pipe(gulp.dest('dist/images')) }); gulp.task('fonts', function () { return gulp.src(bowerFiles()) .pipe($.filter('**/*.{eot,svg,ttf,woff}')) .pipe($.flatten()) .pipe(gulp.dest('dist/fonts')) }); gulp.task('extras', function () { return gulp.src(['app/*.*', '!app/*.html'], { dot: true }) .pipe(gulp.dest('dist')); }); gulp.task('clean', function (cb) { return del(['.tmp', 'dist'], cb); }); gulp.task('build', ['html', 'images', 'fonts', 'extras'], function() { return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true})); }); gulp.task('default', ['clean'], function () { gulp.start('build'); }); gulp.task('serve', ['styles'], function () { browserSync({ notify: false, port: 9000, server: { baseDir: ['.tmp', 'app'], } }); }); // inject bower components gulp.task('wiredep', function () { var wiredep = require('wiredep').stream; gulp.src('app/styles/*.scss') .pipe(wiredep({ directory: 'bower_components' })) .pipe(gulp.dest('app/styles')); gulp.src('app/*.html') .pipe(wiredep({ directory: 'bower_components', exclude: ['bootstrap-sass'] })) .pipe(gulp.dest('app')); }); gulp.task('watch', ['serve'], function () { // watch for changes gulp.watch([ 'app/*.html', '.tmp/styles/**/*.css', 'app/scripts/**/*.js', 'app/images/**/*' ]).on('change', reload); gulp.watch('app/styles/**/*.scss', ['styles']); gulp.watch('app/scripts/**/*.js', ['scripts']); gulp.watch('app/images/**/*', ['images']); gulp.watch('bower.json', ['wiredep']); });