2016-7-15 (1) Build a project using Gulp

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

1. 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

1. 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

1. └──src/
2. ├──less/*.less File
3. ├──sass/*.scss *.sass File
4. ├──css/*.css File
5. ├──js/*.js File
6. ├──fonts/Font Files
7. └──images/Pictures
8. └──dist/

5, install a variety of plug-ins [Plain]View Plain copy

1. 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

1. "Devdependencies": {
2. "Gulp": "^3.9.1",
3. "Gulp-imagemin": "^2.3.0",
4. "Gulp-minify-css": "^1.2.4",
5. "Gulp-uglify": "^1.5.3",
6. "Gulp-util": "^3.0.7",
7. "Gulp-watch-path": "^0.1.0",
8. "Stream-combiner2": "^1.1.1"
9. }

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

1. var gulp = require (' Gulp '),
2. Uglify = require (' gulp-uglify '),
3. Minifycss = require (' Gulp-minify-css '),
4. Imgmin = require (' Gulp-imagemin '),
5. Gutil = require (' Gulp-util '),
6. Watchpath = require (' Gulp-watch-path '),
7. 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

1. var handleerror=function (err) {
2. Console.log (' \ n ');
3. Gutil.log (' FileName: ' +gutil.colors.red (err.filename));
4. Gutil.log (' linenumber: ' +gutil.colors.red (Err.linenumber));
5. Gutil.log (' message: ' + err.message);
6. Gutil.log (' plugin: ' + gutil.colors.yellow (err.plugin));
7. };

(3) New JS Batch compression task

[Plain]View Plain copy

2. Gulp.task (' Script ', function () {//script) custom
4. Assign a file's source path and publish path to the corresponding variable
6. var srcjspath= ' js/*.js ';
8. var destjspath= ' dist/js/';
10. var combined = Combiner.obj ([
12. GULP.SRC (Srcjspath),//Get File Source Address
14. Uglify (),//Perform compression
16. Gulp.dest (Destjspath)//Publish compressed files to a new path
18. ]);
20. Combined.on (' Error ', handleError);//Print error log
22. });

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

2. Gulp.task (' Watchjs ', function () {
4. Gulp.watch (' Js/*.js ', function (event) {
6. var Paths=watchpath (event, ' js/', ' dist/js/');
8. Print modification Type and path
10. Gutil.log (Gutil.colors.green (Event.type) + "+ Paths.srcpath);
12. Gutil.log (' Dist: ' + paths.distpath);
14. Get the error message and continue executing the code
16. var combined = Combiner.obj ([
18. GULP.SRC (Paths.srcpath),
20. Uglify (),
22. Gulp.dest (Paths.distdir)
24. ]);
26. Combined.on (' Error ', handleError);
28. });
30. });

(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

1. Gulp.task (' Default ', function () {
2. The default execution method, the contents of the quotation marks correspond to the contents of the above task write
3. Gulp.run (' Watchjs ', ' css ', ' images ');
4. Monitoring JS
5. Gulp.watch (' js/*.js ', [' watchjs ']);
6. Monitoring CSS
7. Gulp.watch (' css/*.css ', [' CSS ']);
8. Monitor img
9. Gulp.watch (' images/*.* ', [' images ']);
10. });

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