Example Ionic 1 Gulpfile

ionic 1 gulpfile.js

'use strict';

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    webpack = require('webpack'),
    WebpackDevServer = require('webpack-dev-server'),
    webpackConfig = require('./webpack.config.js'),
    bower = require('bower'),
    concat = require('gulp-concat'),
    gettext = require('gulp-angular-gettext'),
    rename = require('gulp-rename'),
    sh = require('shelljs'),
    path = require('path'),
    paths = {
        index: ['./www/index.html'],
        html: ['./app/**/*.html'],
        js: ['./app/**/*.js']
    };

// The development server (the recommended option for development)
gulp.task('default', ['copy', 'watch', 'webpack-dev-server']);

gulp.task('watch', function() {
    gulp.watch(paths.sass, ['default']);
});

gulp.task('copy', function(){
    return gulp.src('./app/index.html')
        .pipe(gulp.dest('./www/'));
});

gulp.task('pot', function () {
    return gulp.src(paths.index.concat(paths.html).concat(paths.js))
        .pipe(gettext.extract('template.pot', {}))
        .pipe(gulp.dest('./po/'));
});

gulp.task('translations', function () {
    return gulp.src('./po/*.po')
        .pipe(gettext.compile({format: 'json'}))
        .pipe(gulp.dest('./app/common/languages/'))
        .pipe(gulp.dest('./www/languages/'));
});

gulp.task('language', ['pot', 'translations']);

gulp.task('install', ['git-check'], function() {
    return bower.commands.install()
        .on('log', function(data) {
            gutil.log('bower', gutil.colors.cyan(data.id), data.message);
        });
});

gulp.task('git-check', function(done) {
    if (!sh.which('git')) {
        console.log(
            '  ' + gutil.colors.red('Git is not installed.'),
            '\n  Git, the version control system, is required to download Ionic.',
            '\n  Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
            '\n  Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
        );
        process.exit(1);
    }
    done();
});

// Build and watch cycle (another option for development)
// Advantage: No server required, can run app from filesystem
// Disadvantage: Requests are not blocked until bundle is available,
//               can serve an old app on refresh
gulp.task('build-dev', ['copy', 'webpack:build-dev'], function() {
    gulp.watch(['./app/**/*'], ['webpack:build-dev']);
});

// Production build
gulp.task('build', ['copy', 'webpack:build']);

gulp.task('webpack:build', function(callback) {
    // modify some webpack config options
    var myConfig = Object.create(webpackConfig);
    myConfig.plugins = myConfig.plugins.concat(
        new webpack.DefinePlugin({
            'process.env': {
                // This has effect on the react lib size
                'NODE_ENV': JSON.stringify('production')
            }
        }),
        new webpack.optimize.DedupePlugin()
        //,
        //new webpack.optimize.UglifyJsPlugin()
    );

    // run webpack
    webpack(myConfig, function(err, stats) {
        if(err) throw new gutil.PluginError('webpack:build', err);
        gutil.log('[webpack:build]', stats.toString({
            colors: true
        }));
        callback();
    });
});

// modify some webpack config options
var myDevConfig = Object.create(webpackConfig);
myDevConfig.devtool = 'sourcemap';
myDevConfig.debug = true;

// create a single instance of the compiler to allow caching
var devCompiler = webpack(myDevConfig);

gulp.task('webpack:build-dev', function(callback) {
    // run webpack
    devCompiler.run(function(err, stats) {
        if(err) throw new gutil.PluginError('webpack:build-dev', err);
        gutil.log('[webpack:build-dev]', stats.toString({
            colors: true
        }));
        callback();
    });
});

gulp.task('webpack-dev-server', function(callback) {
    // modify some webpack config options
    var myConfig = Object.create(webpackConfig);
    myConfig.devtool = 'eval';
    myConfig.debug = true;

    // Start a webpack-dev-server
    new WebpackDevServer(webpack(myConfig), {
        //publicPath: '/' + myConfig.output.publicPath,
        contentBase: path.join(__dirname, 'www'),
        stats: {
            colors: true
        }
    }).listen(8080, 'localhost', function(err) {
            if(err) throw new gutil.PluginError('webpack-dev-server', err);
            gutil.log('[webpack-dev-server]', 'http://localhost:8080/webpack-dev-server/index.html');
        });
});

// Trying to figure out how to watch all the file types.
//gulp.task('webpack-dev-server-watch', ['webpack-dev-server'], function() {
//    gulp.watch([paths.index, paths.html, paths.js], ['webpack-dev-server']);
//});