generator-react-gulp-browserify-less/app/templates/_gulpfile.js

A Yeoman Generator for facebook's React framework. It includes gulp, browserify,babel,source maps, livereload and famous official Twitter bootstrap LESS version.

'use strict';

var gulp = require('gulp');
var del = require('del');

<% if (includeJest) { %>
var path = require('path');
<% } %>

// Load plugins
var $ = require('gulp-load-plugins')();
var browserify = require('browserify');
var watchify = require('watchify');
var source = require('vinyl-source-stream'),
<% if (includeCoffeeScript) { %>
    sourceFile = './app/scripts/app.coffee',
<% } else { %>
    sourceFile = './app/scripts/app.js',
<% } %>
    destFolder = './dist/scripts',
    destFileName = 'app.js';
<% if (includeLess) { %>
  var less = require('gulp-less');
  <% } %>
<% if (includeBabel) { %>
  var babelify = require('babelify');
  var exorcist = require('exorcist');
  var buffer = require('vinyl-buffer');
  var transform = require('vinyl-transform');
  var mapFileName = '/app/scripts/app.js.map';
  <% } %>

var browserSync = require('browser-sync');
var reload = browserSync.reload;

// Styles
gulp.task('styles', [<% if (includeLess) { %>'less', <% } %>'moveCss'<% if (includeStylus) { %>, 'stylus' <% } %>]);

gulp.task('moveCss',['clean'], function(){
  // the base option sets the relative root for the set of files,
  // preserving the folder structure
  gulp.src(['./app/styles/**/*.css'], { base: './app/styles/' })
  .pipe(gulp.dest('dist/styles'));
});
<% if (includeLess) { %>
gulp.task('less', function() {
  return gulp.src('./app/styles/*.less')
              .pipe(less({
              paths: [
              '.',
              './node_modules/bootstrap-less'
              ]
              }))
.pipe(gulp.dest('dist/styles'));
});
<% } %>
<% if (includeStylus) { %>

gulp.task('stylus', function() {
    return gulp.src(['app/styles/**/*.styl'])
        .pipe($.stylus())
        .pipe($.autoprefixer('last 1 version'))
        .pipe(gulp.dest('dist/styles'))
        .pipe($.size());
});

<% } %>

var bundler = watchify(browserify({
    entries: [sourceFile],
    debug: true,
    insertGlobals: true,
    cache: {},
    packageCache: {},
    fullPaths: true
}));
<% if(includeBabel) { %>
  bundler.transform(babelify.configure({
  sourceMapRelative: 'src'
}));
<%  } %>
bundler.on('update', rebundle);
bundler.on('log', $.util.log);
<% if(includeBabel) { %>
  function rebundle() {
      return bundler.bundle()
          // log errors if they happen
          .on('error', $.util.log.bind($.util, 'Browserify Error'))
          .pipe(exorcist(mapFileName))
          .pipe(source(destFileName))
          .pipe(buffer())
          .pipe(gulp.dest(destFolder))
          .on('end', function() {
              reload();
          });
  }
  function bundle(){
    return bundler.bundle()
      .on('error', $.util.log.bind($.util, 'Browserify Error'))
      .pipe(exorcist(mapFileName))
      .pipe(source(destFileName))
      .pipe(buffer())
      .pipe(gulp.dest(destFolder));
  }
<%  }else{ %>
  function rebundle() {
      return bundler.bundle()
          // log errors if they happen
          .on('error', $.util.log.bind($.util, 'Browserify Error'))
          .pipe(source(destFileName))
          .pipe(gulp.dest(destFolder))
          .on('end', function() {
              reload();
          });
  }
<%  } %>
// Scripts
gulp.task('scripts', rebundle);
<% if(includeBabel) { %>
gulp.task('buildScripts', () => bundle());
<%  }else{ %>
gulp.task('buildScripts', function() {
    return browserify(sourceFile)
        .bundle()
        .pipe(source(destFileName))
        .pipe(gulp.dest('dist/scripts'));
});
<%  } %>

<% if (includeJade) { %>

gulp.task('jade', function() {
    return gulp.src('app/template/*.jade')
        .pipe($.jade({
            pretty: true
        }))
        .pipe(gulp.dest('dist'));
});

<% } %>

// HTML
gulp.task('html', function() {
    return gulp.src('app/*.html')
        .pipe($.useref())
        .pipe(gulp.dest('dist'))
        .pipe($.size());
});

// Images
gulp.task('images', function() {
    return gulp.src('app/images/**/*')
        .pipe($.cache($.imagemin({
            optimizationLevel: 3,
            progressive: true,
            interlaced: true
        })))
        .pipe(gulp.dest('dist/images'))
        .pipe($.size());
});

// Fonts
gulp.task('fonts', function() {
    <% if (includeBootstrap || includejQuery || includeModernizr) { %>
    return gulp.src(require('main-bower-files')({
            filter: '**/*.{eot,svg,ttf,woff,woff2}'
        }).concat('app/fonts/**/*'))
        .pipe(gulp.dest('dist/fonts'));
    <% } %>
});

// Clean
gulp.task('clean', function(cb) {
    $.cache.clearAll();
    cb(del.sync(['dist/styles', 'dist/scripts', 'dist/images']));
});

// Bundle
gulp.task('bundle', ['styles', 'scripts', 'bower'], function() {
    return gulp.src('./app/*.html')
        .pipe($.useref.assets())
        .pipe($.useref.restore())
        .pipe($.useref())
        .pipe(gulp.dest('dist'));
});

gulp.task('buildBundle', ['styles', 'buildScripts', 'moveLibraries', 'bower'], function() {
    return gulp.src('./app/*.html')
        .pipe($.useref.assets())
        .pipe($.useref.restore())
        .pipe($.useref())
        .pipe(gulp.dest('dist'));
});

// Move JS Files and Libraries
gulp.task('moveLibraries',['clean'], function(){
  // the base option sets the relative root for the set of files,
  // preserving the folder structure
  gulp.src(['./app/scripts/**/*.js'<% if(includeBabel){ %> ,'./app/scripts/**/*.js.map'
  <% } %>], { base: './app/scripts/' })
  .pipe(gulp.dest('dist/scripts'));
});


// Bower helper
gulp.task('bower', function() {
    <% if (includeBootstrap || includejQuery || includeModernizr) { %>gulp.src('app/bower_components/**/*.js', {
            base: 'app/bower_components'
        })
        .pipe(gulp.dest('dist/bower_components/'));<% } %>

});

gulp.task('json', function() {
    gulp.src('app/scripts/json/**/*.json', {
            base: 'app/scripts'
        })
        .pipe(gulp.dest('dist/scripts/'));
});

// Robots.txt and favicon.ico
gulp.task('extras', function() {
    return gulp.src(['app/*.txt', 'app/*.ico'])
        .pipe(gulp.dest('dist/'))
        .pipe($.size());
});

// Watch
gulp.task('watch', ['html', 'fonts', 'bundle'], function() {

    browserSync({
        notify: false,
        logPrefix: 'BS',
        // Run as an https by uncommenting 'https: true'
        // Note: this uses an unsigned certificate which on first access
        //       will present a certificate warning in the browser.
        // https: true,
        server: ['dist', 'app']
    });

    // Watch .json files
    gulp.watch('app/scripts/**/*.json', ['json']);

    // Watch .html files
    gulp.watch('app/*.html', ['html']);

    gulp.watch(['app/styles/**/*.less', 'app/styles/**/*.css'], ['styles', 'scripts', reload]);

    <% if (includeJade) { %>
        // Watch .jade files
        gulp.watch('app/template/**/*.jade', ['jade', 'html', reload]);
    <% } %>

    // Watch image files
    gulp.watch('app/images/**/*', reload);
});

// Build
gulp.task('build', ['html', 'buildBundle', 'images', 'fonts', 'extras'], function() {
    gulp.src('dist/scripts/app.js')
        .pipe($.uglify())
        .pipe($.stripDebug())
        .pipe(gulp.dest('dist/scripts'));
});

// Default task
gulp.task('default', ['clean', 'build' <% if (includeJest) { %> , 'jest' <% } %> ]);