AngularJs Development App Preparation 3_gulp

Written in the previous words:

Common automatic building tools have grunt, gulp, Webpack, the source of the merge compression, save bandwidth and so on ~

Let's learn the use of Gulp ~

Third, the use of Gulp (Gulp Chinese Network):

The advantages of Gulp: flow-based, tasking

Common API:SRC, dest, watch, task, pipe

(1) Installation Gulp:

NPM Install-g Gulp

(2) Install some NODEJS modules under the WebApp folder:

NPM Init

A Package.json file appears in the WebApp and a node_modules folder

(3) Continue to install some dependent plugins:

NPM Install--save-dev Gulp

One can be too cumbersome to install in bulk (separated by a space):

NPM Install--save-dev gulp-clean gulp-concat gulp-connect gulp-cssmin gulp-imagemin gulp-less gulp-load-plugins Gulp-uglify Open

After the installation is finished, the contents of the Package.json file, such as, you can see the installed dependencies (10) version information:

　　　　

(4) To configure the folder, first to the required file directory pre-design, refer to the following:

　　　Directory structure Design:
　　　　　Build for debugging
Dist for publishing use
src:
　　　　　　　Data (used for mocking)
Image
Script:config,controller,directive,filter,service
App.js
Style
View: Various HTML files
　　　　　Index.html
404.html

　　Writing tasks　　　

　　　　Lib
Html
Json
Css
Js
Image
Clean
Reload
Watch

Start writing tasks, so follow the task name, there are nine steps below ~

Practice:

1) Create a new file gulpfile.js under the WebApp file with the following contents:

1 var gulp = require (' gulp ');2 var $ = require (' Gulp-load-plugins ') ();3 var open = require (' open ');4 5 var app = {6 srcpath: ' src/',7 devPath: ' build/',8 prdpath: ' dist/'9 };Ten  One gulp.task (' Lib ', function () { A gulp.src (' bower_components/**/* ') - . Pipe (Gulp.dest (app.devpath + ' vendor ')) - . Pipe (Gulp.dest (app.prdpath + ' vendor ')) the});

After saving, run the following command:

　　　　　　Gulp Lib

After successful execution, the build, dist two folders appear under the WebApp folder, and both contain the vendor folder.

　　　　　　

2) Create a new folder under the WebApp file src, and add the following code in the Gulpfile.js file:

Gulp.task (' HTML ', function () {    gulp.src (app.srcpath + ' **/*.html ')    . Pipe (Gulp.dest (App.devpath))    . Pipe (Gulp.dest (App.prdpath))});

After writing it, you can test it: Create a new folder named View in SRC, create a new 1.html document in view (the content is empty), and then run

　　　　　　Gulp HTML

After successful execution, the WebApp folder under the Build, Dist two folders, and all contain the view folder, prove that the configuration is successful ~

　　　　　　

3) Add the following code to the Gulpfile.js file:

Gulp.task (' JSON ', function () {    gulp.src (app.srcpath + ' Data/**/*.json ')    . Pipe (Gulp.dest (app.devpath + ' data ') )    . Pipe (Gulp.dest (app.prdpath + ' data ')});

After writing it, you can test it: Create a new folder named data in SRC, create a new 1.json document in data (the content is empty), and then run

　　　　　　Gulp JSON

After successful execution, the WebApp folder under the Build, Dist two folders, and all contain the data folder, prove that the configuration is successful ~

　　　　　　

4) Add the following code to the Gulpfile.js file:

Gulp.task (' Less ', function () {    gulp.src (app.srcpath + ' style/index.less ')    . Pipe ($.less ())    . PIPE ( Gulp.dest (App.devpath + ' CSS ').    pipe ($.cssmin ())    . Pipe (Gulp.dest (app.prdpath + ' CSS ')});

After writing, you can test: Create a new folder named Style in Src, create a new 1.less document in the style, and a index.less document (the content is empty), and then run

　　　　　　Gulp Less

After successful execution, the WebApp folder under the Build, Dist two folders, and all contain the CSS folder and Index.css, prove that the configuration is successful ~

Note: Index.less is used here as a general reference in which all other. Less files are introduced using @import.

　　　　　　

5) Add the following code to the Gulpfile.js file:

Gulp.task (' JS ', function () {    gulp.src (app.srcpath + ' script/**/*.js ')    . Pipe ($.concat (' index.js '))    . Pipe (Gulp.dest (App.devpath + ' JS ')). Pipe (    $.uglify ())    . Pipe (Gulp.dest (App.prdpath + ' JS ')});

After writing it, you can test it: Create a new folder named script in Src, create a new 1.js document in script and a 2.js document (the content is empty), and then run

　　　　　　Gulp JS

After successful execution, the WebApp folder under the Build, Dist two folders, and all contain JS folder and Index.js, prove that the configuration is successful ~

Note: Index.js is used here as a general reference.

　　　　　　

6) Add the following code to the Gulpfile.js file:

Gulp.task (' Image ', function () {    gulp.src (app.srcpath + ' image/**/* ')    . Pipe (Gulp.dest (app.devpath + ' image '))    . Pipe ($.imagemin ())    . Pipe (Gulp.dest (app.prdpath + ' image ')});

After writing, you can test: Create a new folder named image in Src, add a 1.pngto the image, and then run

　　　　　　Gulp Image

Successful execution, the WebApp folder under the Build, Dist two folders, and all contain the image folder and 1.png, and the image is compressed smaller, the original is 72.6k, the build is 72.6k, Dist is 63.4k. Prove the configuration is successful ~

　　　　　　

7) Add the following code to the Gulpfile.js file:

Gulp.task (' Clean ', function () {    gulp.src ([App.devpath, App.prdpath])    . Pipe ($.clean ())});

Run after you've finished writing

　　　　　　　Gulp Clean

After successful execution, the build and Dist two folders under the WebApp folder are gone. Prove the configuration is successful ~

At this point, 9 of the inside already have 7 configuration finished! Can reveal a little tricks, execute a command, all the files that need to compile the copy to complete the full ~ Just add the following code in the Gulpfile.js file:

Gulp.task (' Build ', [' image ', ' js ', ' less ', ' lib ', ' html ', ' JSON ']);

Run:

　　　　　　Gulp Build

And then the deleted before all come back ~ The development of such use is more convenient, do not run so many times. At the same time, you can set the build to automatically open the browser and specify a monitoring port of 1234, as long as the Gulpfile.js file added the following code:

Gulp.task (' Serve ', [' build '], function () {    $.connect.server ({        root: [App.devpath],        livereload:true,        port:1234    });    Open (' http://localhost:1234 ');    Gulp.watch (' bower_components/**/* ', [' Lib ']);    Gulp.watch (App.srcpath + ' **/*.html ', [' html ']);    Gulp.watch (App.srcpath + ' Data/**/*.json ', [' json ']);    Gulp.watch (App.srcpath + ' style/**/*.less ', [' less ']);    Gulp.watch (App.srcpath + ' image/**/* ', [' image ']);    Gulp.watch (App.srcpath + ' script/**/*.js ', [' JS ']);});

Run:Gulp serve

Of course this is not able to achieve the refresh, but also need to carry out the next reload.

8) Add the following code to the Gulpfile.js file:

At the back of 1~6 step to add reload (), that is, the following sentence:

. Pipe ($.connect.reload ());

Example: List only one ~

　　　　

This will automatically update each time you run gulp serve.

There is also a way to implement just enter Gulp to run, as follows, add the following code in the Gulpfile.js file:

Gulp.task (' Default ', [' serve ']);  After adding this sentence, directly run gulp behind nothing, you can directly serve

To try it out:

Gulp

Well, the browser opens automatically! But why is my interface like this?

　　　　

To click View, the following interface appears:

Then click 1.html to see:

When the src/view/1.html content changes, the browser refreshes automatically when it is saved.

So how do you solve a run gulp to see the content?

First of all, the name is wrong ~ should be called index.html. Because the index.html is run by default under a file, the other names will not run automatically.

Then I changed the listening path in the code (as shown in the Bold section):

Open (' http://localhost:1234/view');

Run Gulp,

The interface appears as shown:

OK ~

At this point, this article concludes ~

AngularJs Development App Preparation 3_gulp