Front-end tools
2 likes651 views
The document discusses various front-end development tools including Bower, Grunt, Gulp, Webpack, Yeoman, and PhantomJS. It provides information on what each tool is used for, such as package management, task automation, bundling code, and testing. Examples are given of how to configure and use the tools in a front-end workflow.
![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']);](https://image.slidesharecdn.com/front-end-tools-150402140812-conversion-gate01/85/Front-end-tools-13-320.jpg)
![watch: {
css: {
files: '**/*.sass',
tasks: ['sass'],
options: {
livereload: true,
}
}
}
npm install grunt-contrib-watch](https://image.slidesharecdn.com/front-end-tools-150402140812-conversion-gate01/85/Front-end-tools-15-320.jpg)
![grunt.initConfig({
uglify: {
options: {
mangle: false
},
my_target: {
files: {
'dest/output.min.js': ['src/input.js']
}
}
}
});
npm install grunt-contrib-uglify](https://image.slidesharecdn.com/front-end-tools-150402140812-conversion-gate01/85/Front-end-tools-16-320.jpg)
![grunt.initConfig({
jshint: {
all: ['Gruntfile.js', 'lib/**/*.js', 'test/**/*.js']
}
});
npm install grunt-contrib-jshint](https://image.slidesharecdn.com/front-end-tools-150402140812-conversion-gate01/85/Front-end-tools-17-320.jpg)
!['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](https://image.slidesharecdn.com/front-end-tools-150402140812-conversion-gate01/85/Front-end-tools-19-320.jpg)
Front-end tools
- 1. Front-end tools vs. Pain Bower, Grunt, Gulp,Webpack,Yeoman, …
- 2. GlebVinnikov CTO/PM Full Stack JS Developer oDesk,YuktiDev, PortaOne [email protected]
- 3. Duties — Ext. lib — Include lib to html — Versioning — Minification — Bundle package — Sprites — Deploy to servers — …
- 4. https://nodejs.org — Chrome'sV8 runtime. — Node.js uses an event-driven — non-blocking I/O model https://iojs.org
- 6. Bower A package manager for the web http://bower.io/
- 7. Bower A package manager for the web http://bower.io/ — 18K Packages
- 8. Bower A package manager for the web http://bower.io/ — 18K Packages — Search/Install/Update/Delete
- 9. Bower A package manager for the web http://bower.io/ — 18K Packages — Search/Install/Update/Delete — bower install git://github.com/package.git
- 10. 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
- 11. Grunt The JavaScript Task Runner 4400+ http://gruntjs.com/ Gulp http://gulpjs.com/ Automate and enhance your workflow 1400+
- 12. 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');
- 13. 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']);
- 14. 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
- 15. watch: { css: { files: '**/*.sass', tasks: ['sass'], options: { livereload: true, } } } npm install grunt-contrib-watch
- 16. grunt.initConfig({ uglify: { options: { mangle: false }, my_target: { files: { 'dest/output.min.js': ['src/input.js'] } } } }); npm install grunt-contrib-uglify
- 17. grunt.initConfig({ jshint: { all: ['Gruntfile.js', 'lib/**/*.js', 'test/**/*.js'] } }); npm install grunt-contrib-jshint
- 18. inject: { single: { scriptSrc: 'build/devscript.js', files: { 'dist/index.html': 'src/index.html' } } } npm install grunt-inject
- 19. '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
- 20. 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
- 23. Webpack http://webpack.github.io/ — Plugins — Loaders — Code Splitting into chunks
- 24. Webpack http://webpack.github.io/ — Plugins — Loaders — Code Splitting into chunks — Optimization
- 25. Webpack http://webpack.github.io/ — Plugins — Loaders — Code Splitting into chunks — Optimization — Hot Module Replacement
- 26. Yeoman The Web's scaffolding tool for modern webapps http://yeoman.io/ — 1100+ generators
- 27. Yeoman The Web's scaffolding tool for modern webapps http://yeoman.io/ — 1100+ generators — Sub-generators
- 28. Yeoman The Web's scaffolding tool for modern webapps http://yeoman.io/ — 1100+ generators — Sub-generators — Creating a generator
- 29. PhantomJS PhantomJS is a headless browser http://phantomjs.org/ — JavaScriptCore with JIT compiler
- 30. PhantomJS PhantomJS is a headless browser http://phantomjs.org/ — JavaScriptCore with JIT compiler — Headless web testing
- 31. PhantomJS PhantomJS is a headless browser http://phantomjs.org/ — JavaScriptCore with JIT compiler — Headless web testing — Page automation
- 32. PhantomJS PhantomJS is a headless browser http://phantomjs.org/ — JavaScriptCore with JIT compiler — Headless web testing — Page automation — Network monitoring
- 33. Questions ?