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) {
//Start mongodb
gulp.task('mongo', runCommand('mongod'));
//Start nodemon
gulp.task('nodemon', function () {
nodemon({ script: 'index.js' })
.on('restart', function () {
//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() {
// Clean task — cleans the contents of the public folder
gulp.task('clean', function (callback) {
return del([
], callback);
//Concatentate and minify js files
gulp.task('js', function () {
return gulp.src(paths.clientScripts)
//to ensure Angular dependencies are injected correctly
// 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)
'css': 'assets/styles.min.css',
'js': 'app.min.js',
'base': '<base href="/">'
// Images task — copy all images to public folder and minify
gulp.task('images', function() {
return gulp.src(paths.images)
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
// 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"))
//Watch tasks
gulp.task('watch', ['lint'], function() {
// When script files change — run lint[paths.scripts],['lint']);
//Open the correct url for the develpment environment
gulp.task('open-dev', function(){
.pipe(open({uri: 'http://localhost:1337/app/'}));
}, 1500);
//Open the correct url for production environment
gulp.task('open-prod', function(){
.pipe(open({uri: 'http://localhost:1337/'}));
}, 1500);
//Run production tasks
gulp.task('production', function(callback){
['js', 'html', 'styles', 'images'],
//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