front-end tools

Front-end tools vs.

Pain

Bower, Grunt, Gulp, Webpack, Yeoman, …

Gleb Vinnikov CTO/PM Full Stack JS Developer oDesk, YuktiDev, PortaOne gleb.vinnikov@gmail.com

Duties

� Ext. lib �  Include lib to html � Versioning � Minification � Bundle package �  Sprites � Deploy to servers � …

https://nodejs.org

� Chrome's V8 runtime. � Node.js uses an event-driven � non-blocking I/O model

https://iojs.org

https://www.npmjs.com/

Bower

A package manager for the web

http://bower.io/

Bower

A package manager for the web

http://bower.io/

� 18K Packages

Bower

A package manager for the web

http://bower.io/

� 18K Packages �  Search/Install/Update/Delete

Bower

A package manager for the web

http://bower.io/

� 18K Packages �  Search/Install/Update/Delete �  bower install git://github.com/package.git

Bower

A package manager for the web

http://bower.io/

� 18K Packages �  Search/Install/Update/Delete �  bower install git://github.com/package.git �  bower install http://example.com/script.js

Grunt The JavaScript Task Runner 4400+

http://gruntjs.com/

Gulp

http://gulpjs.com/

Automate and enhance your workflow 1400+

module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); // Load the plugin that provides the "uglify" task. grunt.loadNpmTasks('grunt-contrib-uglify'); // Default task(s). grunt.registerTask('default', ['uglify']); };

var gulp = require('gulp'); gulp.task('one', function(cb) { gulp.src('client/**/*.js') .pipe(minify()) .pipe(gulp.dest('build')); }); gulp.task('two’, function() { }); gulp.task('default', ['one', 'two']);

module.exports = function (grunt) { // Configure grunt grunt.initConfig({ sprite:{ all: { src: 'path/to/your/sprites/*.png', dest: 'destination/of/spritesheet.png', destCss: 'destination/of/sprites.css' } } }); // Load in `grunt-spritesmith` grunt.loadNpmTasks('grunt-spritesmith'); };

npm install grunt-spritesmith

watch: { css: { files: '**/*.sass', tasks: ['sass'], options: { livereload: true, } } }

npm install grunt-contrib-watch

grunt.initConfig({ uglify: { options: { mangle: false }, my_target: { files: { 'dest/output.min.js': ['src/input.js'] } } } });

npm install grunt-contrib-uglify

grunt.initConfig({ jshint: { all: ['Gruntfile.js', 'lib/**/*.js', 'test/**/*.js'] } });

npm install grunt-contrib-jshint

inject: { single: { scriptSrc: 'build/devscript.js', files: { 'dist/index.html': 'src/index.html' } } }

npm install grunt-inject

'sftp-deploy': { build: { auth: { host: 'server.com', port: 22, authKey: 'key1' }, cache: 'sftpCache.json', src: '/path/to/source/folder', dest: '/path/to/destination/folder', exclusions: ['/path/to/source/folder/**/.DS_Store', 'dist/tmp'], concurrency: 4, progress: true } }

npm install grunt-sftp-deploy

imagemin: { // Task static: { // Target options: { // Target options optimizationLevel: 3, }, files: { // Dictionary of files 'dist/img.png': 'src/img.png', // 'destination': 'source' 'dist/img.jpg': 'src/img.jpg', 'dist/img.gif': 'src/img.gif' } }, } }

npm install grunt-contrib-imagemin

Webpack

http://webpack.github.io/

� Plugins

Webpack

http://webpack.github.io/

� Plugins � Loaders

Webpack

http://webpack.github.io/

� Plugins � Loaders � Code Splitting into chunks

Webpack

http://webpack.github.io/

� Plugins � Loaders � Code Splitting into chunks � Optimization

Webpack

http://webpack.github.io/

� Plugins � Loaders � Code Splitting into chunks � Optimization � Hot Module Replacement

Yeoman The Web's scaffolding tool for modern webapps

http://yeoman.io/

� 1100+ generators

Yeoman The Web's scaffolding tool for modern webapps

http://yeoman.io/

� 1100+ generators �  Sub-generators

Yeoman The Web's scaffolding tool for modern webapps

http://yeoman.io/

� 1100+ generators �  Sub-generators � Creating a generator

PhantomJS PhantomJS is a headless browser

http://phantomjs.org/

�  JavaScriptCore with JIT compiler

PhantomJS PhantomJS is a headless browser

http://phantomjs.org/

�  JavaScriptCore with JIT compiler � Headless web testing

PhantomJS PhantomJS is a headless browser

http://phantomjs.org/

�  JavaScriptCore with JIT compiler � Headless web testing � Page automation

PhantomJS PhantomJS is a headless browser

http://phantomjs.org/

�  JavaScriptCore with JIT compiler � Headless web testing � Page automation � Network monitoring

Questions ?

Thanks!

Gleb Vinnikov gleb.vinnikov@gmail.com