Gulp Automation Building Tools
Reference: http://www.cnblogs.com/aiiright/p/6762355.html
1、 What is Gulp? Gulp is the building tool for front-end code. Can optimize the resources of the website, based on the Nodejs Automatic Task Manager, can complete the test, check, merge, compress, format, automatic browser refresh, deploy file generation, and listen to the changes of files in Js/css/sass/less/image/html/coffee and other files.
How to install Gulp.
1, the Global Installation Gulp command line: NPM install-g. Note) If it is under Windows, you can install it directly, if it is a Mac version, you need to add sudo permission before the command.
2. Project development Dependency (devdependencies) installation command line: NPM Install plugin--save--dev. NPM Install plug-in--save (production environment). (Development environment)
Gulp as well as webpack are the tools needed to develop, and the current is to add--save--dev, put under development attributes. Vue will be in the production environment, so add-save. How to use Gulp in your project.
First step: NPM init (initialization) Step two: Plug-in installation and configuration
1、 Common Plug-ins: Gulp-sass SASS Compilation
GULP-MINIFY-CSSCSS compression
Gulp-imagemin compressed png/jpg/git/svg format picture file
Browser-sync to maintain multiple browsers, multiple device synchronization, front-end development is very useful, is a prerequisite component.
Gulp-concat Consolidated file
2、 Install the Basic plug-in command: NPM install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint Gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del--save-dev
3、 step: A, with the use of Gulp Plug-ins, the first to use the Require to load the plug-in, if the use of plug-ins are very many, gulpfile.js file at the beginning of the following: var gulp = require (' gulp ');
b, automatic loading plug-in gulp-load-plugins this plugin can
automatically help you loadThe Gulp plugin in the Package.json file.
C, task execution & nbsp; Analysis: task-name is the name for the task, command Line execution command: Gulp task-name. output Result: Shuaishuaige. Example: gulp.task (' Task-name ', function () { console.log (' shuaishuaige! '); });
The results of successful execution are as follows:
Gulp Altogether V Method:
New Task Gulp.task ()
Get File Source Address Gulp.src ()
File output Address gulp.dest ()
Run Task Gulp.run ()
Listening for file modification Gulp.watch ()
Picture to manipulate GULP.SRC ()
Picture to perform gulp.pipe ()
Plugin name defined in Package.json plugins.uglify ()
Move a picture to a folder Gulp.dest ()
This is the code that I write with Gulp in my project.
/** * Assembly installation * npm Install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-minify-html gulp-load-plugins gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean--save-dev & nbsp; * minifyhtml html Compression * imagemin Image Compression * rubysass sass compression * minifyCss      CSS compression * uglify js Compression & nbsp; * Jshint js Inspection * rename File Rename * concat File Merging * clean Empty Folder * browsersync Automatic Refresh * GULP.SRC () pictures to manipulate * gulp.pipe () pictures to perform * gulp.dest () move pictures to Folder */
Introducing Gulp to the plug-in var gulp = require (' gulp '); var bs = require ("Browser-sync"). Create ();
Gulp-load-plugins plug-in can directly load Package.json inside of the plugin var plugins = require (' Gulp-load-plugins ') ({//Let Gulp-l The Oad-plugins plug-in can match other plug-ins except the Gulp plugin pattern: ' * '};
Static Server + Monitor css/h
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.