Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Use gulp to build your js, html, and css files for a MEAN stack app AND run your development and production environments
var gulp = require('gulp'),
runSequence = require('run-sequence'),
ngAnnotate = require('gulp-ng-annotate'),
jshint = require('gulp-jshint'),
del = require('del'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
cssmin = require('gulp-cssmin'),
htmlreplace = require('gulp-html-replace'),
autoprefixer = require('gulp-autoprefixer'),
minifyHTML = require('gulp-minify-html'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
exec = require('child_process').exec,
nodemon = require('gulp-nodemon'),
open = require('gulp-open'),
//Common paths
var paths = {
scripts: ['./client/app/**/*.js','./server/**/*.js', './index.js','./spec/**/*.js','./gulpfile.js'],
clientScripts: ['./client/app/**/*.js', '!./client/app/spec/**/*.js'],
styles: ['./client/assets/**/*.css'],
partials: ['client/app/**/*.html'],
images: ['client/assets/**/*.png', 'client/assets/**/*.jpg', 'client/assets/**/*.jpeg', 'client/assets/**/*.gif', 'client/assets/**/*.svg', 'client/**/*.ico'],
};
//Set up function to allow running scripts
function runCommand(command) {
return function (cb) {
exec(command, function (err, stdout, stderr) {
console.log(stdout);
console.log(stderr);
cb(err);
});
};
}
//Start mongodb
gulp.task('mongo', runCommand('mongod'));
//Start nodemon
gulp.task('nodemon', function () {
nodemon({ script: 'index.js' })
.on('restart', function () {
console.log('restarted!');
});
});
//Set environment variables for production or development
gulp.task('set-dev-node-env', function() {
process.env.NODE_ENV = 'development';
});
gulp.task('set-prod-node-env', function() {
process.env.NODE_ENV = 'production';
});
// JSHint task
gulp.task('lint', function() {
gulp.src(paths.scripts)
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// Clean task — cleans the contents of the public folder
gulp.task('clean', function (callback) {
return del([
'public/**/*'
], callback);
});
//Concatentate and minify js files
gulp.task('js', function () {
return gulp.src(paths.clientScripts)
.pipe(concat('app.min.js'))
//to ensure Angular dependencies are injected correctly
.pipe(ngAnnotate())
.pipe(uglify())
.pipe(gulp.dest('public/'));
});
// Update index.html to use built js and css files and use correct base href.
// Minify html files
gulp.task('html', function() {
return gulp.src(paths.partials)
.pipe(htmlreplace({
'css': 'assets/styles.min.css',
'js': 'app.min.js',
'base': '<base href="/">'
}))
.pipe(minifyHTML())
.pipe(gulp.dest('public/'));
});
// Images task — copy all images to public folder and minify
gulp.task('images', function() {
gulp.src('client/assets/favicon.ico')
.pipe(gulp.dest('public/assets/'));
return gulp.src(paths.images)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest('public/assets/'));
});
// Copy and minify css files from the client folder to public/assets folder)
gulp.task('styles', function() {
return gulp.src(paths.styles)
.pipe(autoprefixer("last 2 versions", "> 1%", "ie 8"))
.pipe(cssmin())
.pipe(concat('styles.min.css'))
.pipe(gulp.dest('public/assets/'));
});
//Watch tasks
gulp.task('watch', ['lint'], function() {
// When script files change — run lint
gulp.watch([paths.scripts],['lint']);
});
//Open the correct url for the develpment environment
gulp.task('open-dev', function(){
setTimeout(function(){
gulp.src(__filename)
.pipe(open({uri: 'http://localhost:1337/app/'}));
}, 1500);
});
//Open the correct url for production environment
gulp.task('open-prod', function(){
setTimeout(function(){
gulp.src(__filename)
.pipe(open({uri: 'http://localhost:1337/'}));
}, 1500);
});
//Run production tasks
gulp.task('production', function(callback){
runSequence('clean',
'lint',
['js', 'html', 'styles', 'images'],
callback);
});
//Run development environment
gulp.task('run-dev', ['set-dev-node-env','mongo','nodemon','watch', 'open-dev'],function(){
});
//Preview development code
gulp.task('run-prod', ['set-prod-node-env', 'production', 'mongo','nodemon', 'watch', 'open-prod']);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment