Skip to content

Instantly share code, notes, and snippets.

@derekdon
Created July 5, 2016 09:03
Show Gist options
  • Save derekdon/18c978643a15720ee68f2b7324a60800 to your computer and use it in GitHub Desktop.
Save derekdon/18c978643a15720ee68f2b7324a60800 to your computer and use it in GitHub Desktop.
Example Ionic 1 Gulpfile
'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']);
//});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment