Front-end automated building tools and automated building tools

Front-end automated building tools and automated building tools

Currently, mainstream automated front-end building tools include grunt, gulp, and webpack. They can optimize website resources and greatly improve our work efficiency. gulp is an automatic task runner based on NodeJS, she can automatically test, check, merge, compress, format, automatically refresh the browser, and generate deployment files for javascript/coffee/sass/less/html/image/css files, the listener repeat the specified steps after the file is modified. Let's learn about gulpj! Pai_^

I. node. js environment setup:

Note: gulp is based on nodejs and nodejs needs to be installed;

Install: Go to the official node. js website and click the Download button. Select the corresponding version (. msi file) based on your computer system and click next ).

2. command line operations:

Command Line is Terminal in OSX, and Command Prompt (Command Prompt, that is, start-> Search cmd) in windows );

In this example, the operation is performed in windows. Go to cmd (that is, click Start> Search cmd and press Enter );

Node-vCheck the installed nodejs version. if the version number is displayed, it indicates that nodejs has been correctly installed. PS: the version number is not displayed. Try to log out of your computer and try again;

Npm-vView the npm version. npm is the nodejs Package Manager installed together when nodejs is installed;

CdGo to the directory under your project. Usage: cd + project path;

DirList objects;

ClsClear the content of the Command Prompt window.

Iii. Introduction of npm (this article combines css framework sass with webstrom development tools)

　　Npm(Node package manager) nodejs package manager for node plug-in management (including installation, uninstallation, and dependency management );

　　NpmPrerequisites: Based onNodeJS EnvironmentAndGit Environment(This article will not explain) the two can be used. If not, install the SDK first;

The following operations are performed in the webstrom development tool Terminal (the operations are the same in cmd );

First, go to the project path;

　　NpmInstall plug-in commands:

Global installation:npm install <name> [-g];

　　Local Installation: npm install <name> [--save-dev];

　　<Name>: name of the node plug-in to be installed. Example:Npm install gulp-g (Global installation)


Npm install gulp -G Global installation. Will be installed inC:\Users\Administrator\AppData\Roaming\npmAnd write the system environment variables;

　　npm install gulp --save-dev Local installation: The local installation will be installed in the current directory. Global installation can be called anywhere through the command line. Local installation will be installed in the node_modules folder in the Location Directory and called through require;

　　--save: Save the configuration information to package. json (package. json is the configuration file of the NodeJS project );

-Dev: Save it to the devDependencies node of package. json. If-dev is not specified, it will be saved to the dependencies node. Generally, it is stored in the dependencies, such as express/ejs/body-parser.

Why save it to package. json? Because the node plug-in package is relatively large, do not add version management. Write the configuration information to package. json and add it to version management. Other developers can download it.

　Npm init always press enter,Initialize and generate the node_modules file, package. json

Npm install, all required packages will be downloaded according to package. json,npm install --productionDownload only the package of the dependencies node.

　　　　Package. json is a common json file.Therefore, you cannot add any comments. Each installation of a plug-in file contains one more plug-in name and version number. The content is as follows:

{  "name": "gulp-demo",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "",  "license": "ISC",  "devDependencies": {    "grunt-autoprefixer": "^3.0.4",    "gulp": "^3.9.1",    "gulp-autoprefixer": "^3.1.1",    "gulp-concat": "^2.6.0",    "gulp-connect": "^5.0.0",    "gulp-htmlmin": "^3.0.0",    "gulp-imagemin": "^3.0.3",    "gulp-minify-css": "^1.2.4",    "gulp-rename": "^1.2.2",    "gulp-rev": "^7.1.2",    "gulp-rev-collector": "^1.0.5",    "gulp-sass": "^2.3.2",    "gulp-uglify": "^2.0.0"  }}

Use npm to uninstall the plug-in:npm uninstall <name> [-g] [--save-dev]PS: do not directly Delete the local plug-in package

Delete all plug-ins:Npm uninstall gulp-less gulp-uglify gulp-concat ......??? Too troublesome

With rimraf:Npm install rimraf-gUsage:Rimraf node_modules

Use the npm update plug-in:Npm update <name> [-g] [--save-dev]

Update all plug-ins:Npm update [--save-dev]

View npm help:Npm help

Plug-ins installed in the current directory:Npm list

4. Install gulp

Global installation:Npm install gulp-g

　　　　Local installation (under the current project path ):Npm install gulp-save-dev

Check whether the installation is correct: run the command promptGulp-vThe version number is correctly installed.

The global installation of gulp is to execute the gulp task, while the local installation of gulp is to call the functions of the gulp plug-in.

　　5. Create a gulpfile. js File

Gulpfile. js is the configuration file of the gulp project and is a common js file located in the project root directory (you can also put gulpfile. js in other folders ).

 

　　Vi. instance presentation (combined with the sass framework and webstorm development tools)

Common gulp commands in gulpfile. js files

Var gulp = require ("gulp"); // gulp core module var sass = require ("gulp-sass "); // sass compile var server = require ("gulp-connect"); // server var concat = require ("gulp-concat "); // merge var uglify = require ("gulp-uglify"); // compress var minifyCss = require ("gulp-minify-css "); // css compression var imgmin = require ("gulp-imagemin"); // Image Compression var rename = require ("gulp-rename "); // rename the file var rev = require ("gulp-rev "); // Add the suffix var revCollector = require ("gulp-rev-collector") of the previous hash value to the static resource "); // generate a manifest based on rev to replace html linkvar prefixer = require ("gulp-autoprefixer"); // automatically add the browser vendor prefix var htmlmin = require ("gulp-htmlmin "); // compress the page
Gulp. task ("default", ["copyindex", "copy-img", "copy-data"]);
// Replace gulp with the link path based on rev-manifest. task ("rev-collector", function () {return gulp. src (["dist/css /**/*. json "," dist/index.html "]). pipe (revCollector ({replaceReved: true ,})). pipe (gulp. dest ("dist/")}) gulp. task ("addPrx", function () {return gulp. src ("src/css2 /*. css "). pipe (prefixer ({browsers: ['last 2 version', 'android> = 100'], cascade: true, // whether to beautify the property value. Default Value: true, like this: remove: true // whether to remove unnecessary prefix default: true })). Pipe (gulp. dest ("dist/css/")}) // create the server gulp. task ("server", function () {server. server ({root: "dist"})} // js merge gulp. task ("js", function () {return gulp. src ("src/js /**/*"). pipe (concat ("all. js ")). pipe (gulp. dest ("dist/js/")}); // merge and compress gulp. task ("js-c", function () {return gulp. src ("src/script /**/*"). pipe (concat ("all-c.js ")). pipe (gulp. dest ("dist/js /")). pipe (uglify ()). pipe (rename ("all-c-min.js ")). pipe (g Ulp. dest ("dist/js/")}); // compress the css file gulp. task ("css", function () {return gulp. src ("src/css /*. css "). pipe (minifyCss ()). pipe (gulp. dest ("dist/css /")). pipe (rev ()). pipe (gulp. dest ("dist/css /")). pipe (rev. manifest ()). pipe (gulp. dest ("dist/css/")}) // <! -- Copy src: Operation directory dest: target directory --> gulp. task ("copyindex", function () {return gulp. src ("src/index.html "). pipe (htmlmin ({minifyCSS: true, minifyJS: true, removeComments: true, collapseWhitespace: true })). pipe (gulp. dest ("dist/")}) // copygulp in batches. task ("copy-img", function () {return gulp. src ("src/images /**/*"). pipe (imgmin ()). pipe (gulp. dest ("dist/images/")}) // operate multiple sets of files in gulp. task ("copy-data", function () {return gulp. Src (["src/json/*", "src/xml /*","! Src/json/s -*. json "]). pipe (gulp. dest ("dist/data/");}) gulp. task ("sass-c", function () {return gulp. src ("src/scss /**/*. scss "). pipe (sass ()). pipe (gulp. dest ("dist/css/")}) // watchgulp. task ("watch", function () {gulp. watch ("src/index.html", ["copyindex"]); gulp. watch ("src/images/**/*", ["copy-img"]); gulp. watch (["src/json/*", "src/xml/*"], ["copy-data"]);})

Usage: import the project to webstorm, right-click gulpfile. in js, select Show Gulp Tasks to open the Gulp window. If No task found is displayed, right-click Reload tasks and double-click it to run.

　　　　

If you have any errors or have any questions, please leave a message!