OPTIMISING AND AUTOMATING YOUR FRONT END WORKFLOW

atmosphere 2014

Hi!

@ch4zm

OPTIMISING AND AUTOMATING YOUR FRONT END WORKFLOW

Front-End Ops

smashingmagazine.com/front-end-ops

“Such a person would need to be an expert at serving and hosting front-end resources. (…) They would find the best ways to piece together the parts of a Web application, and they’d be pros at

versioning, caching and deployment.”

Alex Sexton

TOOLS

Package Managers

Node Package Manager

BOWER

GRUNT

module.exports = function (grunt) { grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); ! grunt.initConfig({ jshint: { src: ['./lib/*.js'] }, concat: { src: { src: ['lib/*.js'], dest: 'temp/all.js' } }, uglify: { src: { files: { 'dist/all.js': 'temp/all.js' } } } }); ! grunt.registerTask('build', ['concat', 'uglify']); };

Gruntfile.js

Gruntfile.coffee

module.exports = (grunt) -> grunt.loadNpmTasks 'grunt-contrib-jshint' grunt.loadNpmTasks 'grunt-contrib-concat' grunt.loadNpmTasks 'grunt-contrib-uglify' grunt.initConfig jshint: src: ['./lib/*.js'] ! concat: src: src: ['lib/*.js'] dest: 'temp/all.js' ! uglify: src: files: 'dist/all.js': 'temp/all.js' ! grunt.registerTask 'build', ['concat', 'uglify']

GULP

var gulp = require('gulp'); !var jshint = require('gulp-jshint'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); !gulp.task('jshint', function() { gulp.src('./lib/*.js') .pipe(jshint()); }); !gulp.task('build', function() { gulp.src('./lib/*.js') .pipe(concat('all.js')) .pipe(uglify()) .pipe(gulp.dest('./dist/')) });

gulpfile.js

• (grunt|gulp) test • (grunt|gulp) build • (grunt|gulp) serve

test task

• linting (JSLint, JSHint, ESLint) • testing (Jasmine, Mocha, QUnit)

build task

• code preprocess • concatenation • minification • versioning

serve task

• http server • watch • livereload

DEMO

AUTOMATE ALL THE FRONT-END THINGS!

T.HANKS

?

T.HANKS