Gulp is a tool for building projects automatically during the front-end development process, as well as grunt. The build tool relies on plug-ins to automatically monitor file changes and complete the syntax checking, merging, renaming, compressing, formatting, automatic browser refresh, and deployment files of Js/sass/less/html/image/css/coffee and other files.
Gulp is a Nodejs-based auto-runner, and he draws on the idea of the UNIX operating system's piping (pipe), and the output from the previous level is the input at the back level. Here are the specific processes:
1, installation Nodejs
nodejs:https://nodejs.org/
Nodejs comes with NPM module manager and opens the DOS command window input node-v after installation to see if Nodejs is installed successfully
Common NPM Commands
NPM init--Initialization
NPM install--Install Plugin
NPM Install plugname-g--Global Installation
NPM Install [email protected]--Installing a specific version of the plugin
NPM update--Update Plugin
NPM uninstall--Uninstall Plugin
Common DOS commands
CD into a directory
CD: Return to the previous level
Dir View List
CLS Clear Screen
Del name Delete file
MD Name New directory name
Rd Name Delete directory name
Copy con name.txt new file
del name.txt deleting files
2. Global Installation Gulp
[Plain]View Plain copy
- NPM Install Gulp-g
3. Create a local project
Above is the preparatory work, after installing the Global Gulp, the CD to the project folder to install the local gulp, before the installation to first initialize
[Plain]View Plain copy
- NPM Init
Initialization requires you to enter some values, do not lose the direct return, click y after the root directory automatically created a Package.json file, this file is used to store the plug-in name and version of the installation, what is the use of this file? When we copy the project to others, we do not need to copy the plugin, just need to copy the project files, Package.json and Gulp.file.js in the past, the recipient CD to the project file directory directly into the NPM install can be installed on our copy before installing the various plugins.
4. Design project directory Index structure
[Plain]View Plain copy
- └──src/
- ├──less/*.less File
- ├──sass/*.scss *.sass File
- ├──css/*.css File
- ├──js/*.js File
- ├──fonts/Font Files
- └──images/Pictures
- └──dist/
5, install a variety of plug-ins
[Plain]View Plain copy
- NPM Install gulp gulp-imagemin gulp-minify-css gulp-uglify gulp-util gulp-watch-path stream-combiner2--save-dev
--save-dev This command is to write the installed plug-in information to the "Devdependencies" attribute in the Package.json file, after the plug-in has been installed all the Package.json changes are:
[Plain]View Plain copy
- "Devdependencies": {
- "Gulp": "^3.9.1",
- "Gulp-imagemin": "^2.3.0",
- "Gulp-minify-css": "^1.2.4",
- "Gulp-uglify": "^1.5.3",
- "Gulp-util": "^3.0.7",
- "Gulp-watch-path": "^0.1.0",
- "Stream-combiner2": "^1.1.1"
- }
After the plug-in is installed, a node_modules folder is created automatically, and the dependencies of all plugins are there.
gulp--Local Gulp
gulp-imagemin--image Compression
GULP-MINIFY-CSS--CSS compression
GULP-UGLIFY--JS compression
gulp-util--Console Code Coloring
gulp-watch-path--files A lot when editing that which compression, not all compression (get change the file's src and dest Path)
stream-combiner2--Some Gulp task compilation error will be terminated gulp.watch
, use gulp-watch-path
mates stream-combiner2
to avoid this situation
6. How to Use Gulp
Console input Gulp First look for the Gulpfile.js file, in search of the default task, so we should manually create a new JS file named Gulpfile.js, the task is written inside. The specific file directory is:
Gulp Altogether V Method:
Gulp.task ()--New task
GULP.SRC ()--Get the file source address
Gulp.dest ()--File output address
Gulp.run ()--run task
Gulp.watch ()--Monitoring file modification
7. Writing gulpfile.js files
(1) Introduction of plugin variables
[Plain]View Plain copy
- var gulp = require (' Gulp '),
- Uglify = require (' gulp-uglify '),
- Minifycss = require (' Gulp-minify-css '),
- Imgmin = require (' Gulp-imagemin '),
- Gutil = require (' Gulp-util '),
- Watchpath = require (' Gulp-watch-path '),
- Combiner = require (' Stream-combiner2 ');
(2) New code coloring and display error log method, this method uses the Gulp-util and Stream-combiner2 plug-ins
[Plain]View Plain copy
- var handleerror=function (err) {
- Console.log (' \ n ');
- Gutil.log (' FileName: ' +gutil.colors.red (err.filename));
- Gutil.log (' linenumber: ' +gutil.colors.red (Err.linenumber));
- Gutil.log (' message: ' + err.message);
- Gutil.log (' plugin: ' + gutil.colors.yellow (err.plugin));
- };
(3) New JS Batch compression task
[Plain]View Plain copy
- Gulp.task (' Script ', function () {//script) custom
- Assign a file's source path and publish path to the corresponding variable
- var srcjspath= ' js/*.js ';
- var destjspath= ' dist/js/';
- var combined = Combiner.obj ([
- GULP.SRC (Srcjspath),//Get File Source Address
- Uglify (),//Perform compression
- Gulp.dest (Destjspath)//Publish compressed files to a new path
- ]);
- Combined.on (' Error ', handleError);//Print error log
- });
This kind of writing requires a lot of CSS files in the CSS directory, as long as the change of a click to save the time Gulp will all the CSS files will be compressed again, in order to improve performance we can use the Gulp-watch-path plugin to compress/publish modified files only
[Plain]View Plain copy
- Gulp.task (' Watchjs ', function () {
- Gulp.watch (' Js/*.js ', function (event) {
- var Paths=watchpath (event, ' js/', ' dist/js/');
- Print modification Type and path
- Gutil.log (Gutil.colors.green (Event.type) + "+ Paths.srcpath);
- Gutil.log (' Dist: ' + paths.distpath);
- Get the error message and continue executing the code
- var combined = Combiner.obj ([
- GULP.SRC (Paths.srcpath),
- Uglify (),
- Gulp.dest (Paths.distdir)
- ]);
- Combined.on (' Error ', handleError);
- });
- });
(4) Writing default tasks and listening tasks
Create a new batch task or listen to modify the task according to the actual needs of the project to write, and so we write a lot of tasks need to write to the default, after the default is written in the DOS window only need to write Gulp can automatically perform the task
[Plain]View Plain copy
- Gulp.task (' Default ', function () {
- The default execution method, the contents of the quotation marks correspond to the contents of the above task write
- Gulp.run (' Watchjs ', ' css ', ' images ');
- Monitoring JS
- Gulp.watch (' js/*.js ', [' watchjs ']);
- Monitoring CSS
- Gulp.watch (' css/*.css ', [' CSS ']);
- Monitor img
- Gulp.watch (' images/*.* ', [' images ']);
- });
If you do not want to perform the default task only the JS single file compression task only needs to input gulp Watchjs. Console input is:
At this time, gulp is in the listening state, if you want to cancel press CTRL + C ENTER.
2016-7-15 (1) Build a project using Gulp