Created
April 10, 2015 01:00
-
-
Save rcdilorenzo/f371d2db05adf1cc79db to your computer and use it in GitHub Desktop.
An extremely readable yet powerful gulpfile that converts an angular app to dist folder that can be served as static assets in production while having sourcemaps and live reloading in the development environment. This gulpfile was a conversion from a stock grunt yeoman config.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var gulp = require('gulp'); | |
var concat = require('gulp-concat'); | |
var print = require('gulp-print'); | |
var bowerFiles = require('main-bower-files'); | |
var filter = require('gulp-filter'); | |
var sass = require('gulp-sass'); | |
var flatten = require('gulp-flatten'); | |
var jsFilter = filter('**/*.js'); | |
var cssFilter = filter('**/*.css'); | |
// Test-only | |
var karma = require('karma').server; | |
// Dev-only | |
var sourcemaps = require('gulp-sourcemaps'); | |
var express = require('express'); | |
var livereload = require('express-livereload'); | |
var path = require('path'); | |
var embedlr = require("gulp-embedlr"); | |
var logger = require('morgan'); | |
// Production-only | |
var uglify = require('gulp-uglify'); | |
var annotate = require('gulp-ng-annotate'); | |
var minifyCSS = require('gulp-minify-css'); | |
var gzip = require('gulp-gzip'); | |
var compress = require('compression')(); | |
// Javascript | |
gulp.task('dev:app:js', function () { | |
return gulp.src(['app/scripts/app.js', 'app/scripts/**/*.js']) | |
.pipe(sourcemaps.init()) | |
.pipe(concat('app.js')) | |
.pipe(sourcemaps.write()) | |
.pipe(gulp.dest('./dist/assets/scripts')); | |
}); | |
gulp.task('prod:app:js', function () { | |
return gulp.src(['app/scripts/app.js', 'app/scripts/**/*.js']) | |
.pipe(annotate()) | |
.pipe(concat('app.js')) | |
.pipe(uglify()) | |
.pipe(gulp.dest('./dist/assets/scripts')); | |
}); | |
gulp.task('dev:vendor:js', function () { | |
return gulp.src(bowerFiles()) | |
.pipe(jsFilter) | |
.pipe(concat('vendor.js')) | |
.pipe(gulp.dest('./dist/assets/scripts')); | |
}) | |
gulp.task('prod:vendor:js', function () { | |
return gulp.src(bowerFiles()) | |
.pipe(jsFilter) | |
.pipe(annotate()) | |
.pipe(concat('vendor.js')) | |
.pipe(uglify()) | |
.pipe(gulp.dest('./dist/assets/scripts')); | |
}) | |
// SCSS/CSS | |
gulp.task('dev:app:scss', function () { | |
return gulp.src('app/styles/main.scss') | |
.pipe(sass()) | |
.pipe(gulp.dest('./dist/assets/styles')); | |
}); | |
gulp.task('prod:app:scss', function () { | |
return gulp.src('app/styles/main.scss') | |
.pipe(sass()) | |
.pipe(minifyCSS()) | |
.pipe(gulp.dest('./dist/assets/styles')); | |
}); | |
gulp.task('dev:vendor:css', function () { | |
return gulp.src(bowerFiles()) | |
.pipe(cssFilter) | |
.pipe(sourcemaps.init()) | |
.pipe(concat('vendor.css')) | |
.pipe(sourcemaps.write()) | |
.pipe(gulp.dest('./dist/assets/styles')); | |
}) | |
gulp.task('prod:vendor:css', function () { | |
return gulp.src(bowerFiles()) | |
.pipe(cssFilter) | |
.pipe(concat('vendor.css')) | |
.pipe(minifyCSS()) | |
.pipe(gulp.dest('./dist/assets/styles')); | |
}) | |
// Fonts | |
gulp.task('app:bower:fonts', function () { | |
return gulp.src('bower_components/**/*.{ttf,svg,woff}') | |
.pipe(flatten()) | |
.pipe(gulp.dest('./dist/assets/fonts')); | |
}); | |
gulp.task('app:fonts', ['app:bower:fonts'], function () { | |
return gulp.src('app/fonts/**/*') | |
.pipe(gulp.dest('./dist/assets/fonts')); | |
}); | |
// HTML | |
gulp.task('app:index', function () { | |
return gulp.src('app/index.html') | |
.pipe(embedlr({ port: 35730 })) | |
.pipe(gulp.dest('./dist/')); | |
}); | |
gulp.task('app:views', ['app:index'], function () { | |
return gulp.src('app/views/**/*') | |
.pipe(gulp.dest('./dist/assets/views')); | |
}); | |
gulp.task('app:images', function () { | |
return gulp.src('app/images/**/*') | |
.pipe(gulp.dest('./dist/assets/images')); | |
}); | |
// Unit Tests | |
gulp.task('test', function (done) { | |
karma.start({ | |
configFile: __dirname + '/spec/unit/karma.conf.js', | |
singleRun: true | |
}, done); | |
}); | |
// Main | |
gulp.task('serve', ['dev:app:js', 'dev:vendor:js', 'dev:app:scss', 'dev:vendor:css', 'app:images', 'app:fonts', 'app:views'], function () { | |
var app = express(); | |
app.use(compress); | |
app.use(logger('dev')); | |
app.use('/', express.static('dist')); | |
app.all('/**', function(req, res, next) { | |
if (path.extname(req.url) != '') { | |
next(); | |
} else { | |
return res.sendFile('dist/index.html', {root: './'}); | |
} | |
}); | |
app.listen(3000) | |
livereload(app, { watchDir: 'dist/', port: 35730 }); | |
gulp.watch('app/**/*', ['dev:app:js', 'dev:app:scss', 'app:images', 'app:fonts', 'app:views']); | |
gulp.watch('bower_components/**/*', ['dev:vendor:js', 'dev:vendor:css']); | |
}); | |
gulp.task('default', ['serve']); | |
gulp.task('prod:compile', ['prod:app:js', 'prod:vendor:js', 'prod:app:scss', 'prod:vendor:css', 'app:images', 'app:fonts', 'app:views']); | |
gulp.task('prod:serve', ['prod:compile'], function () { | |
var app = express(); | |
app.use('/', express.static('dist')); | |
app.all('/**', function(req, res, next) { | |
if (path.extname(req.url) != '') { | |
next(); | |
} else { | |
return res.sendFile('dist/index.html', {root: './'}); | |
} | |
}); | |
app.listen(3000) | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment