Embed Size (px)
Citation preview
Front-end tools vs.
Pain
Bower, Grunt, Gulp, Webpack, Yeoman, …
Gleb Vinnikov CTO/PM Full Stack JS Developer oDesk, YuktiDev, PortaOne [email protected]
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 ?
