Gulp of front-end automation

With the development of the front-end technology and the development of the front-end project to update the speed of the requirements, front-end automation more and more attention, before the traditional front-end development method has become more and more unable to meet the needs of development, so a variety of automation tools followed. And Gulp is one of the most powerful tools in the game.

1. Install node. JS:
Because Gulp is based on node. js. So the first need to install node.js,node:http://nodejs.cn/download/installation is relatively simple.
After the installation is complete, enter in cmd: NODE-V view the installed node version. Npm-v viewing the installed NPM version

2. Global Installation Gulp:
Execute NPM Install Gulp-g
Note: The gulp is installed globally to perform gulp tasks
After the installation is complete, enter in cmd: GULP-V view the installed Gulp version.

3. Create a new project project file root directory new Package.json
Execute NPM Init to create a new automatic Package.json
Note: Package.json is an essential configuration file based on the Nodejs project, which is a common JSON file that is stored in the root of the project. There are some configuration information that can be configured according to your needs during the creation process.

4. You can now install the various plugins for Gulp in the project root directory:
Execute NPM Install plugin name--save-dev
Note: Gulp plug-ins have very many, and many useful plugins:
Common plugins
Compilation of sass (Gulp-sass)
Less compilation (gulp-less)
Renaming (Gulp-rename)
Automatically add CSS prefixes (gulp-autoprefixer)
Compress css (GULP-CLEAN-CSS)
JS code Check (gulp-jshint)
Merging JS files (gulp-concat)
Compression JS code (GULP-UGLIFY)
Compress picture (gulp-imagemin)
Auto Refresh page (gulp-livereload, Google Browser Pro test, Google browser needs to install Livereload plugin)
Picture cache, only images replaced by compression (Gulp-cache)
Change Reminder (gulp-notify)
5. Create a new Gulpfile.js file under the project root directory
Note: The Gulpfile.js file is a script file executed by Gulp and can be customized to perform plug-ins and execution sequences.
Specific examples can be consulted: http://www.gulpjs.com.cn/

Reproduced in this article!

Gulp of front-end automation