gulp應用于ionic概述

為什麼要使用gulp：

一句話：自動化。對于需要反複重複的任務，例如壓縮（minification）、編譯、單元測試、linting等，

自動化工具可以減輕你的勞動，簡化你的工作。當你正确配置好了任務，任務運作器就會自動幫你或你的小組完成大部分無聊的工作。

這個是grunt對于javascript世界的建構工具，也是gulp的存在意義。

gulp 官方網站http://gulpjs.com/

git網址 https://github.com/gulpjs/gulp

正題：

在我們從ionic 官方網站上down一下ionic start demo的時候裡面會有兩個檔案

gulpfile.js

package.json

gulpfile.js就是guip的核心，他有豐富的插件，共你用作各種功能。

gulp 相關的插件在https://www.npmjs.com基本上都可以找到，并且有簡單使用介紹。

這裡面我僅做幾個例子，作為介紹，

首先要安裝 gulp

Install gulp globally:

npm install --global gulp      

Install gulp in your project devDependencies:

//這邊安裝完之後，會在package.json裡面，以後隻有package.json裡面有相關依賴，可以直接ionic install 就可以吧所有依賴安裝了

npm install —-save-dev gulp
           

比如，圖檔壓縮https://www.npmjs.com/package/gulp-imagemin

先安裝相關插件

npm install --save-dev gulp-imagemin
npm install --save-dev imagemin-pngquant //這個是依賴
           

隻要在gulpfile.js檔案中加入如下代碼：

var paths = {
    sass        : ['./scss/**/*.scss'],
    javascript  : ['./www/js/**/*.js'],
    image       : ['./www/img/*']
};
var gulp = require('gulp');//原檔案中已經存在
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');

gulp.task('imagemin', function () {
    return gulp.src(paths.image)
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))
        .pipe(gulp.dest('./dest/img'));
});
           

然後在項目的跟目錄中輸入 gulp imagemin 

相關的圖檔就被壓縮到/dest/img，

再比如（這個，知道怎麼個 意思，但是由于檔案比較少，效果不是很好，這個是源檔案中本來就有的）

var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');


gulp.task('sass', function (done) {
    gulp.src(paths.sass)
        .pipe(sass())
        .pipe(gulp.dest('./www/css/'))
        .pipe(minifyCss({
            keepSpecialComments: 0
        }))
        .pipe(rename({extname: '.min.css'}))
        .pipe(gulp.dest('./www/css/'))
        .on('end', done);
});
           

運作gulp.sass就可以運作了。如果一個gulpfile.js裡面有很多這樣的risk那麼：

gulp.task('default',['imagemin', 'sass']
           

運作gulp就可以了。

gulp 還有很多功能，監視，文法檢測，等等，都有相關插件，隻要有需要去加入相應的risk就可以了。

注意點：

1.在打包的時候，由于Jetbrains-idea 裡面ionic build android 的時候是針對www檔案下的，而我們gulp的目标路徑肯定不能是本路徑，如果可以，配置一下，讓build 的預設路徑變成dest （代碼裡生成的），那麼就可以直接build了

但是我圖省事，就直接把www裡面代碼覆寫了。

2.

照此方法，理論上是可行的，但是由于電腦不争氣。罷工了。以上内容待測試。

參考文獻：

http://www.tuicool.com/articles/uMBZ7fB

http://www.smashingmagazine.com/2014/06/11/building-with-gulp/ 一些文法的講解，還有檔案match

http://markgoodyear.com/2014/01/getting-started-with-gulp/ 整個流程的執行個體