Angular 1 gulpfile

var gulp = require('gulp');
var mustache = require('gulp-mustache');
var babel = require('gulp-babel');
var _ = require('lodash');
var globby = require('globby');
var sourcemaps = require('gulp-sourcemaps');
var browserSync = require('browser-sync');
var runSequence = require('run-sequence');
var less = require('gulp-less');
var concat = require('gulp-concat');
var del = require('del');
var uglify = require('gulp-uglify');
var eventStream = require('event-stream');
var csso = require('gulp-csso');
var ngAnnotate = require('gulp-ng-annotate');
var del = require('del');

var CONFIG = require('./config.js');
var THIRD_PARTY_SCRIPT_INFO = require('./frontend/lib-info/scripts.json');
var THIRD_PARTY_CSS_INFO = require('./frontend/lib-info/css.json');
var NG_SUFFIXES = [
  'service',
  'controller',
  'filter',
  'directive',
  'provider'
];

gulp.task('compile-js', () => {
  return gulp.src(getAppScripts())
    .pipe(babel({
        presets: ['es2015']
    }))
    .pipe(ngAnnotate())
    .pipe(concat('wiregoose.js'))
    .pipe(gulp.dest('frontend/app/'));
});

gulp.task('compile-less', function () {
  return gulp.src('frontend/app/less/app.less')
    .pipe(sourcemaps.init())
    .pipe(less({
      paths: ['frontend/app/bower_components/', 'frontend/app/less', 'frontend/app']
    }))
    .pipe(concat('wiregoose.css'))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('frontend/app/'));
});

gulp.task('compile-index', function () {
  return gulp.src('frontend/app/index.mustache')
    .pipe(mustache(getIndexArgs(), {extension: '.html'}))
    .pipe(gulp.dest('frontend/app'));
});

gulp.task('compile-dev', function (cb) {
  runSequence(['compile-js', 'compile-less', 'compile-index'], cb);
});

gulp.task('serve-dev', ['compile-dev'], function() {
  browserSync({
    port: 8000,
    server: {
      baseDir: 'frontend/app'
    }
  });

  gulp.task('reload', function (cb) {
    browserSync.reload();
    cb();
  });

  gulp.watch('frontend/app/**/*.less', ['compile-less']);
  gulp.watch(['frontend/app/**/*.js', '!frontend/app/wiregoose.js'], ['compile-js']);

  gulp.watch(['frontend/app/wiregoose.js', 'frontend/app/**/*.html'], ['reload']);

  gulp.watch('frontend/app/wiregoose.css', function () {
    gulp.src('frontend/app/wiregoose.css')
      .pipe(browserSync.reload({stream: true}));
  });
  gulp.watch('frontend/app/index.mustache', ['compile-index']);
});

gulp.task('compile-dist', function (cb) {
  var indexArgs = getIndexArgs();
  return eventStream.concat(
      gulp.src(indexArgs.thirdPartyScripts)
        .pipe(uglify())
        .pipe(concat('vendors.min.js'))
        .pipe(gulp.dest('public/lib')),
      gulp.src('frontend/app/wiregoose.js')
        .pipe(uglify())
        .pipe(concat('wiregoose.min.js'))
        .pipe(gulp.dest('public')),
      gulp.src(indexArgs.thirdPartyCss)
        .pipe(csso())
        .pipe(concat('vendors.min.css'))
        .pipe(gulp.dest('public/lib')),
      gulp.src('frontend/app/wiregoose.css')
        .pipe(csso())
        .pipe(concat('wiregoose.min.css'))
        .pipe(gulp.dest('public')),
      gulp.src('frontend/app/assets/**')
        .pipe(gulp.dest('public/assets')),
      gulp.src(['frontend/app/**/*.html', '!frontend/app/index.html'])
        .pipe(gulp.dest('public')),
      gulp.src('frontend/app/index.mustache')
        .pipe(mustache(getDistIndexArgs(), {extension: '.html'}))
        .pipe(gulp.dest('public'))
    );
});

gulp.task('dist', function (cb) {
  runSequence('clean', 'compile-dev', 'compile-dist', cb);
});

gulp.task('clean', function(next) {
  del('public').then(function() { next(); });
});

gulp.task('default', ['dist']);

function getIndexArgs() {
  var indexArgs = {
    stripBase: _.constant(stripBase),
    thirdPartyScripts: THIRD_PARTY_SCRIPT_INFO.map(_.property('path')),
    thirdPartyCss: THIRD_PARTY_CSS_INFO.map(_.property('path')),
    appCss: 'wiregoose.css',
    appScript: 'wiregoose.js',
    config: CONFIG
  };
  return indexArgs;
}

function getDistIndexArgs() {
  var indexArgs = {
    stripBase: _.constant(stripBase),
    thirdPartyScripts: 'lib/vendors.min.js',
    thirdPartyCss: 'lib/vendors.min.css',
    appCss: 'wiregoose.min.css',
    appScript: 'wiregoose.min.js',
    config: CONFIG
  };
  return indexArgs;
}

function stripBase(text, render) {
  text = render(text);
  if (text.indexOf('frontend/app') === 0) {
    text = text.substr('frontend/app'.length);
  }
  if (text.indexOf('/') === 0) {
    text = text.substr('/'.length);
  }
  return text;
}

function getAppScripts() {
  return globby.sync([
    '{frontend/app,frontend/app/!(bower_components)/**}/*.js',
    '!{frontend/app,frontend/app/!(bower_components)/**}/*{' + NG_SUFFIXES.join(',') + '}.js',
    '!frontend/app/wiregoose.js'
  ])
  .concat(globby.sync([
    '{frontend/app,frontend/app/!(bower_components)/**}/*{' + NG_SUFFIXES.join(',') + '}.js',
    '!frontend/app/wiregoose.js'
  ]));
}

About the author: John Apostolidis

Frontend developer

Leave a Reply

Your email address will not be published.