My Gulp Primer Collection

Also ashamed to say, on and off to learn a lot of web development technology (here I do not dare to learn what they call the front end, may not be called the front end), but rarely to automatically contact the front-end automated building tools. (Of course, that's why I'm busy with other things.) hahaha. ==> you this is the interface bar. As far as the present situation is concerned, I expect to encounter many unexpected difficulties in the next few months. As for why it is unexpected, and perhaps because my skills are not enough. (Need to touch a lot of technology to constantly enrich themselves.) At present, the company is small, so I am also back and forth running. Also not what technical content, just did some "practicing" thing. Anyway, I'm going to take a look at some of these magical tools tonight for the sake of rapid development. such as: The protagonist of this article Gulp (Gulp Chinese network). Gulp Chinese web is so introduced, GULP with automated build tools to enhance your workflow. The advantages are: 1 easy to use: through the code because of the configuration strategy, gulp let simple tasks simple, complex tasks manageable. 2 build fast: With the power of the Node.js stream, you can quickly build projects and reduce frequent IO operations. 3) Plug-in high quality: Gulp Strict plug-in guide to ensure that plug-ins as you expect the simple high quality work. 4 easy to learn: Through the least API, Master Gulp effortless, construction work in the grasp: as a series of flow pipeline.
Of course, we can learn from the Gulp Chinese web to use in gulp. Now, I will reprint two articles about Gulp primer to this, convenient for everyone to study together. Reproduced from: HTTP://WWW.YDCSS.COM/ARCHIVES/18

Gulp A detailed introductory tutorial Introduction:

Gulp is a tool for building code in the front-end development process, is an automatic project construction tool, she not only can optimize the website resources, and in the development process many repetitive tasks can use the correct tool to automatically complete, using her, we can not only very happy to write code, but also greatly improve our efficiency.

Gulp is a Nodejs based automated task Manager that automates the testing, inspection, merging, compression, formatting, automatic browser refresh, and deployment of file JAVASCRIPT/COFFEE/SASS/LESS/HTML/IMAGE/CSS. And listen for these steps that are specified repeatedly after the file has been changed. In the implementation, she borrowed from the Unix operating system pipeline (pipe) idea, the first level of output, directly into the next level of input, making the operation is very simple. With this article, we'll learn how to use Gulp to change the development process, making development faster and more efficient.

Gulp and Grunt are very similar, but compared to the grunt of frequent IO operations, gulp flow operations, faster and more easily complete the construction work.

This example shows the general usage of Gulp as an example of gulp-less (a gulp plug-in that compiles less into CSS), so as long as we learn to use a gulp plug-in, the other plug-ins look at their help documents. Let's learn gulp together. ^_^

Gulp Common Address:

Gulp Official Website: http://gulpjs.com

Gulp Plugin Address: http://gulpjs.com/plugins

Gulp Official Api:https://github.com/gulpjs/gulp/blob/master/docs/api.md

Gulp Chinese api:http://www.ydcss.com/archives/424

Catalog: 1, install Nodejs 2, use command line 3, NPM introduction 4, Optional CNPM 5, Global Installation Gulp 6, new Package.json file 7, local installation Gulp plugin 8, new Gulpfile.js file 9, run Gulp 10, Use Webstorm to run Gulp task 11, summary

Before studying, we should talk about the steps of using gulp and give the readers a preliminary understanding. First of course is to install Nodejs, through the Nodejs NPM Global installation and Project Installation Gulp, and then install the required Gulp Plug-ins in the project, Then create a new Gulp profile gulpfile.js and write the configuration information (define Gulp Tasks), and then run the Gulp task from the command prompt.

Install Nodejs-> Global Installation Gulp-> Project installation Gulp and Gulp plug-in-> configuration gulpfile.js-> Run task 1, install Nodejs

1.1, Description: Gulp is based on Nodejs, of course, the need to install Nodejs;

1.2, Installation: Open Nodejs official website, click the huge green Download button, it will be based on system information to select the corresponding version (. msi file). Then install it like a QQ installation (installation path is optional). 2, use the command line (if you are familiar with the command line, you can skip to step 3rd)

2.1, Description: What is the command line. The command line at OS X is the terminal (Terminal), at Windows is the command prompt (commands Prompt);

2.2, note: After the operation is under the Windows system;

2.3, a brief introduction gulp in the use of common commands, open a command prompt to execute the following command (open: Window + R input cmd carriage return):

Node-v View the Nodejs version of the installation with the version number indicating that Nodejs was just installed correctly. PS: Failed to appear version number, please try to log off the computer retry;

Npm-v See NPM's version number, and NPM is the Nodejs Package Manager that was installed together while installing Nodejs, so what's the use of it? Explain later;

CD location to directory, usage: cd + path;

Dir lists file lists;

The CLS empties the contents of the Command Prompt window.

3, NPM introduction

3.1. Description: NPM (Node Package Manager) Nodejs Package Manager for node plug-in management (including installation, uninstall, management dependencies, etc.);

3.2. Use NPM to install Plugins: command prompt to perform npm install <name> [g] [--save-dev];

3.2.1, <name>:node plug-in name. Example: NPM install gulp-less--save-dev

3.2.2, G: Global installation. will be installed on the C:\USERS\ADMINISTRATOR\APPDATA\ROAMING\NPM and written to the system environment variable; non-global install: will be installed in the current location directory; global installation can call it anywhere from the command line, Local installation will be installed in the location directory of the Node_modules folder, through the Require () call;

3.2.3 、--Save: Configuration information will be saved to Package.json (Package.json is nodejs project configuration file);

3.2.4,-dev: Save to the Devdependencies node of the Package.json, do not specify that-dev will be saved to the dependencies node; generally stored in dependencies like these express/ejs/ Body-parser and so on.

3.2.5, why to save to Package.json. Because the node plug-in package is relatively large, it does not add version management, writes configuration information to Package.json and adds it to version management, and other developers download it (the command prompt executes NPM install, All required packages are downloaded according to Package.json, and npm install--production downloads only the Dependencies node's packages.

3.3. Use NPM Uninstall plugin: npm uninstall <name> [g] [--save-dev] PS: Do not delete the local plug-in package directly

3.3.1, remove all plugins: npm uninstall gulp-less gulp-uglify gulp-concat ...??? Too much trouble

3.3.2, with the help of RIMRAF:NPM install RIMRAF-G usage: Rimraf node_modules

3.4, use NPM Update plugin: NPM update <name> [g] [--save-dev]

3.4.1, update all plugins: NPM Update [--save-dev]

3.5. See NPM Help: NPM helps

3.6, the current directory has installed Plug-ins: NPM list

PS:NPM Install plug-in process: Download the corresponding plug-in package from http://registry.npmjs.org (the Web server is located abroad, so often download slowly or abnormal), the solution to look down ↓↓↓↓↓↓. 4. CNPM of optional equipment

4.1, Description: Because NPM installation plug-ins are downloaded from a foreign server, affected by the network, may appear abnormal, if NPM's server in China, so we would like to share the Taobao team did this thing. 32 a . From the official website:"This is a full npmjs.org mirror, you can use this instead of the official version (read only), Sync frequency is currently 10 minutes to ensure that as far as possible with the official service synchronization." ";

4.2, official website: http://npm.taobao.org;

4.3. Install: Command prompt to perform NPM install cnpm-g--registry=https://registry.npm.taobao.org Note: It is a good idea to view its version number Cnpm-v or turn off the command prompt to reopen it after installation. There may be errors in the direct use after installation;

Note: CNPM is exactly the same as NPM usage, except that NPM is changed to CNPM when the command is executed (the following actions will replace NPM with CNPM). 5. Global Installation Gulp

5.1, Description: Global Installation Gulp purpose is to carry out the gulp task through her;

5.2, Installation: command Prompt to execute cnpm install gulp-g;

5.3, to see whether the correct installation: command prompt to perform gulp-v, the version number is installed correctly. 6. New Package.json file

6.1, Description: Package.json is based on the NODEJS project is an essential configuration file, it is stored in the project root directory of ordinary JSON file;

6.2, it is such a JSON file (note: The JSON file can not write comments, copy the following to delete the comments): JavaScript

1 2 3 4 5 6 7 8 9 ()

{   "name": " Test ",   //project name (MUST)   " version ":" 1.0.0 ",   //project version (MUST)   " description ":" T His is for study Gulp project! ",   //description (MUST)   " homepage ":" ",   //project home page    ' Repository ': {    //project resource pool      ' type ': ' Git '