'use strict'; var gulp = require('gulp'); var gulpif = require('gulp-if'); var sourcemaps = require('gulp-sourcemaps'); var util = require('gulp-util'); var source = require('vinyl-source-stream'); var buffer = require('vinyl-buffer'); var watchify = require('watchify'); var browserify = require('browserify'); var browserSync = require('browser-sync'); var babelify = require('babelify'); var notify = require('gulp-notify'); var sass = require('gulp-sass'); var concat = require('gulp-concat'); var _ = require('lodash'); var eslint = require('gulp-eslint'); var argv = require('yargs').argv; var server = require('./server.js').app; var minifyCss = require('gulp-minify-css'); var uglify = require('gulp-uglify'); var config = { bootstrapDir: './node_modules/bootstrap-sass' }; gulp.task('build', ['js:build', 'sass:build', 'copy'], function() { }); gulp.task('js:build', function() { bundle(false); }); gulp.task('serve', ['browser-sync', 'run-server', 'lint:watch', 'sass:build', 'sass:watch', 'copy'], function() { bundle(true); }); gulp.task('run-server', function() { server.listen(4000); }); gulp.task('browser-sync', function() { browserSync({ files: ['build/css/*.css', 'build/js/*.js'], proxy: 'http://localhost:4000', port: 3000 }); }); gulp.task('sass:build', function () { gulp.src('./sass/**/main.scss') .pipe(gulpif(!argv.production, sourcemaps.init())) .pipe(sass({ includePaths: [ config.bootstrapDir + '/assets/stylesheets' ] }).on('error', sass.logError)) .pipe(gulpif(!argv.production, sourcemaps.write('./maps'))) .pipe(gulpif(argv.production, minifyCss())) .pipe(gulp.dest('./build/css')) .pipe(browserSync.stream()); }); gulp.task('sass:watch', function () { gulp.watch('./sass/**/*.scss', ['sass']); }); gulp.task('copy', function () { var staticAssets = [ './fonts/**/*', './img/**/*' ]; gulp.src(staticAssets, {base: './'}) .pipe(gulp.dest('./build')); gulp.src(config.bootstrapDir + '/assets/fonts/**/*') .pipe(gulp.dest('./build/fonts')); }); gulp.task('lint', function () { return gulp.src(['js/**/*.js']) // eslint() attaches the lint output to the eslint property // of the file object so it can be used by other modules. .pipe(eslint()) // eslint.format() outputs the lint results to the console. // Alternatively use eslint.formatEach() (see Docs). .pipe(eslint.format()) // To have the process exit with an error code (1) on // lint error, return the stream and pipe to failOnError last. .pipe(eslint.failOnError()); }); gulp.task('lint:watch', function () { gulp.watch('js/**/*.js', ['lint']); }); function bundle(watch) { var bro; if (watch) { bro = watchify(browserify('./js/app.js', // Assigning debug to have sourcemaps _.assign(watchify.args, { debug: true }))); bro.on('update', function() { rebundle(bro, true); }); } else { bro = browserify('./js/app.js', { debug: true }); } bro.transform(babelify.configure({ compact: false })); function rebundle(bundler, watch) { return bundler.bundle() .on('error', notify.onError('Error: <%= error.message %>')) .pipe(source('app.js')) .pipe(buffer()) .pipe(gulpif(!argv.production, sourcemaps.init({ loadMaps: true }))) // loads map from browserify file .pipe(gulpif(!argv.production, sourcemaps.write())) // writes .map file .pipe(gulpif(argv.production, uglify({mangle: false}))) .pipe(gulp.dest('./build/js')) .pipe(browserSync.stream()); } return rebundle(bro); }