AngularJs 開發app之準備工做3_gulp

寫在前面的話：

　　常見的自動構建工具備 grunt、gulp、webpack，把源碼進行合併壓縮，節省帶寬等~

一塊兒來學習 gulp 的使用吧~

3、gulp的使用( gulp 中文網)：

　　gulp 的優勢：基於流、任務化

　　經常使用API: src 、dest 、watch 、task 、pipe

（1）安裝 gulp：

　　　　npm install -g gulp

（2）再在 webapp文件夾下安裝一些 nodejs 模塊：

　　　　npm init

　　以後webapp中就會出現一個package.json文件，以及一個 node_modules 文件夾

（3）繼續安裝一些依賴插件：

　　　　npm install --save-dev gulp

　　一個一個裝太麻煩了，可用批量安裝的方式（之間用空格分開）：

　　　　npm install --save-dev gulp-clean gulp-concat gulp-connect gulp-cssmin gulp-imagemin gulp-less gulp-load-plugins gulp-uglify open

　　安裝完了以後 package.json文件的內容以下圖，能夠看到已安裝的依賴（10個）的版本信息：

　　　　

　（4）配置文件夾，首先要對須要的文件目錄預先作一下設計，參考以下：　

　　　目錄結構設計：
　　　　　build 用於調試
　　　　　dist 用於發佈使用
　　　　　src:
　　　　　　　data (用於mock數據)
　　　　　　　image
　　　　　　　script：config,controller,directive,filter,service
　　　　　　　app.js
　　　　　　　style:
　　　　　　　view: 各類html文件
　　　　　　　index.html
　　　　　　　404.html

　　編寫任務　　　

　　　　lib
　　　　html
　　　　json
　　　　css
　　　　js
　　　　image
　　　　clean
　　　　reload
　　　　watch

　開始編寫任務吧，因此按照任務名稱，下面有九步~

　作法：

　　　　1）在webapp文件下新建一個文件gulpfile.js，內容以下：

 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 };
10 
11 gulp.task('lib', function(){
12     gulp.src('bower_components/**/*')
13     .pipe(gulp.dest(app.devPath + 'vendor'))
14     .pipe(gulp.dest(app.prdPath + 'vendor'))
15 });

　　　　　保存後，運行以下命令：

　　　　　　gulp lib

　　　　　執行成功後，webapp 文件夾下出現了 build 、dist 兩個文件夾，且都包含了 vendor 文件夾。

　　　　　　

　　　　2）在webapp文件下新建一個文件夾 src, 並在gulpfile.js文件新增以下代碼：

gulp.task('html', function(){
    gulp.src(app.srcPath + '**/*.html')
    .pipe(gulp.dest(app.devPath))
    .pipe(gulp.dest(app.prdPath))
});

　　　　寫完了以後能夠測試一下：在src中新建一個名爲view的文件夾，在view中新建一個1.html文檔(內容爲空都沒有關係)，而後運行

　　　　　　gulp html

　　　　執行成功後，webapp 文件夾下的 build 、dist 兩個文件夾中，且都包含了 view 文件夾，證實配置成功啦~

　　　　　　

　　　　3）在gulpfile.js文件新增以下代碼：

gulp.task('json', function(){
    gulp.src(app.srcPath + 'data/**/*.json')
    .pipe(gulp.dest(app.devPath + 'data'))
    .pipe(gulp.dest(app.prdPath + 'data'))
});

　　　　寫完了以後能夠測試一下：在src中新建一個名爲data的文件夾，在data中新建一個1.json文檔(內容爲空都沒有關係)，而後運行

　　　　　　gulp json

　　　　執行成功後，webapp 文件夾下的 build 、dist 兩個文件夾中，且都包含了 data 文件夾，證實配置成功啦~

　　　　　　

　　　4）在gulpfile.js文件新增以下代碼：

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'))
});

　　　　寫完了以後能夠測試一下：在src中新建一個名爲 style 的文件夾，在 style 中新建一個1.less文檔 以及一個 index.less文檔 (內容爲空都沒有關係)，而後運行

　　　　　　gulp less

　　　　執行成功後，webapp 文件夾下的 build 、dist 兩個文件夾中，且都包含了 css 文件夾及index.css，證實配置成功啦~

注：此處使用index.less做爲一個總的引用，在其中使用@import將其餘全部的.less文件都引入過來。

　　　　　　

　　　　5）在gulpfile.js文件新增以下代碼：

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'))
});

　　　　寫完了以後能夠測試一下：在src中新建一個名爲 script 的文件夾，在 script 中新建一個1.js文檔 以及一個 2.js文檔 (內容爲空都沒有關係)，而後運行

　　　　　　gulp js

　　　　執行成功後，webapp 文件夾下的 build 、dist 兩個文件夾中，且都包含了 js 文件夾及index.js，證實配置成功啦~

注：此處使用index.js做爲一個總的引用。

　　　　　　

　　　　6）在gulpfile.js文件新增以下代碼：

gulp.task('image', function(){
    gulp.src(app.srcPath + 'image/**/*')
    .pipe(gulp.dest(app.devPath + 'image'))
    .pipe($.imagemin())
    .pipe(gulp.dest(app.prdPath + 'image'))
});

　　　　寫完了以後能夠測試一下：在src中新建一個名爲 image 的文件夾，在 image 中加入一個1.png，而後運行

　　　　　　gulp image

　　　　執行成功後，webapp 文件夾下的 build 、dist 兩個文件夾中，且都包含了 image 文件夾及1.png，且圖片被壓縮得更小了，原來是72.6k, build中是72.6k, dist中是63.4k。 證實配置成功啦~

　　　　　　

　　　　7）在gulpfile.js文件新增以下代碼：

gulp.task('clean', function(){
    gulp.src([app.devPath, app.prdPath])
    .pipe($.clean())
});

　　　　寫完了以後運行

　　　　　　　gulp clean

　　　　執行成功後，webapp 文件夾下的 build 、dist 兩個文件夾都消失了。 證實配置成功啦~

　　至此，9個裏面已經有7個配置完啦！能夠透露一下小技巧了，執行一個命令，將全部須要編譯拷貝的文件一下全搞定~只要在gulpfile.js文件新增以下代碼：

gulp.task('build',['image', 'js', 'less', 'lib', 'html', 'json']);

　　　　運行： 

　　　　　　gulp build

　　　　而後以前被刪掉的都回來啦~開發時這樣用就比較方便啦，不用運行那麼屢次了。同時，還可設置構建時自動打開瀏覽器，並指定監控端口爲1234，只要在gulpfile.js文件新增以下代碼：

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']);
});

　　　　運行：gulp serve 

固然這樣是不可以實現刷新的，還須要進行下一步reload纔可。

8）在gulpfile.js文件新增以下代碼：

　　在1~6步 的後面都要加上 reload()，也就是下面的一句話：

　　　　.pipe($.connect.reload());

　　實例：只列舉一個~

　　　　

這樣的話，每次運行 gulp serve時都能自動更新了，

還有一個方法，能夠實現 只輸入 gulp 便可運行，方法以下，在gulpfile.js文件新增以下代碼：

gulp.task('default', ['serve']);  //加了這一句以後，直接運行gulp後面不加什麼，就能夠直接serve

來試一下：

　　gulp

額，瀏覽器自動打開！ 並呈現出 index.html中的內容。

　注意：index.html是寫在src路徑下的。

ok 啦~

至此，本文結束~