gulp

Setup

• Definition of gulp tasks will be put in ./tasks/ directory
• use --watch to enable watching
• use --production to enable compression etc
• use --verbose to show verbose logs

gulpfile.js

Gulp supports ES6, create a file named gulpfile.babel.js:

import gulp from 'gulp';
import requireDir from 'require-dir';
requireDir('./tasks');

scripts (webpack)

scss

livereload

import gulp from 'gulp';
import gutil from 'gulp-util';
import gulpSequence from 'gulp-sequence';
import livereload from 'gulp-livereload';
import yargs from 'yargs';

let argv = yargs.argv;
let watch = !!argv.watch;
let verbose = !!argv.verbose;

gulp.task('livereload', (cb) => {

  // This task runs only if the
  // watch argument is present!
  if (!watch) return cb();

  // Start livereload server
  livereload.listen({
    reloadPage: 'Extension',
    quiet: !verbose
  });
  gutil.log('Starting', gutil.colors.cyan('\'livereload-server\''));

  // Hint: Scripts are being watched by webpack!
  //       For more info checkout ./webpack.js

  gulp.watch('app/styles/**/*.css', ['styles:css']);
  gulp.watch('app/styles/**/*.less', ['styles:less']);
  gulp.watch('app/styles/**/*.scss', ['styles:sass']);
  gulp.watch('app/pages/**/*.html', ['pages']);
  gulp.watch('app/_locales/**/*', ['locales']);
  gulp.watch('app/images/**/*', ['images']);
  gulp.watch('app/fonts/**/*.{woff,ttf,eot,svg}', ['fonts']);

});

images

images are assumed to located at app/images, it will be copied to dist/images. If in production, imagemin will be used to compress images.

import gulp from 'gulp';
import gulpif from 'gulp-if';
import imagemin from 'gulp-imagemin';
import livereload from 'gulp-livereload';
import yargs from 'yargs';

let argv = yargs.argv;
let production = !!argv.production;
let watch = !!argv.watch;

gulp.task('images', () => {
   return gulp.src('app/images/**/*')
    .pipe(gulpif(production, imagemin()))
    .pipe(gulp.dest('dist/images'))
    .pipe(gulpif(watch, livereload()));
});

fonts

fonts are located at app/fonts, it would be copied to dist/fonts

import gulp from 'gulp';
import gulpif from 'gulp-if';
import imagemin from 'gulp-imagemin';
import livereload from 'gulp-livereload';
import yargs from 'yargs';

let argv = yargs.argv;
let watch = !!argv.watch;

gulp.task('fonts', () => {
  return gulp.src('app/fonts/**/*.{woff,ttf,eot,svg}')
    .pipe(gulp.dest('dist/fonts'))
    .pipe(gulpif(watch, livereload()));
});