gulp在ionic中的使用

簡介

Gulp是一個基於流的自動化構建器。

安裝

npm config set registry http://registry.npm.taobao.org  ---最好用國內源
npm install -g gulp
npm install --save-dev gulp

建立文件 gulpfile.js

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

運行

gulp

功能說明

編譯Sass (gulp-ruby-sass)
Autoprefixer (gulp-autoprefixer)
縮小化(minify)CSS (gulp-minify-css)
JSHint (gulp-jshint)
拼接 (gulp-concat)
醜化(Uglify) (gulp-uglify)
圖片壓縮 (gulp-imagemin)  --這個插件實際使用中可能會有一些問題
即時重整(LiveReload) (gulp-livereload)
清理檔案 (gulp-clean)
圖片快取，只有更改過得圖片會進行壓縮 (gulp-cache)
更動通知 (gulp-notify)

jshint插件基本用法：

var jshint = require('gulp-jshint');
var gulp   = require('gulp');

gulp.task('lint', function() {
  return gulp.src('./lib/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('YOUR_REPORTER_HERE'));
});

比較全的用法：

gulp.task('scripts', function() {  
  return gulp.src('src/scripts/**/*.js')
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(notify({ message: 'Scripts task complete' }));
});

Ionic 項目中使用gulp

之因此單獨介紹下Ionic中使用gulp，是由於Ionic自己帶了gulp，其腳本在生成的項目ionic目錄下。 
原始內容以下：

var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sh = require('shelljs');

var paths = {
  sass: ['./scss/**/*.scss']
};

gulp.task('default', ['sass']);

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

gulp.task('watch', function() {
  gulp.watch(paths.sass, ['sass']);
});

gulp.task('install', ['git-check'], function() {
  return bower.commands.install()
    .on('log', function(data) {
      gutil.log('bower', gutil.colors.cyan(data.id), data.message);
    });
});

gulp.task('git-check', function(done) {
  if (!sh.which('git')) {
    console.log(
      '  ' + gutil.colors.red('Git is not installed.'),
      '\n  Git, the version control system, is required to download Ionic.',
      '\n  Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
      '\n  Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
    );
    process.exit(1);
  }
  done();
});

首先，在項目加入gulp。下面命令是分開寫的，也能夠合併一次性安裝。

npm install --save-dev gulp
npm install gulp-util --save-dev
npm install brow --save-dev
npm install bower --save-dev
npm install gulp-concat --save-dev
npm install gulp-sass --save-dev
npm install gulp-minify-css --save-dev
npm install gulp-rename --save-dev
npm install shelljs --save-dev
npm install jshint gulp-jshint --save-dev
npm install gulp-uglify --save-dev
npm install gulp-notify --save-dev
npm install gulp-minify-html --save-dev
npm install gulp-imagemin --save-dev
npm install gulp-cache --save-dev  
npm install gulp-cond --save-dev
npm install yargs --save-dev
npm install gulp-ng-annotate  --save-dev
npm install gulp-clean --save-dev

根據條件判斷編譯方式

gulp-cond

 

gulp.src("*.js")
    .pipe(cond(is_release, uglify({compress:false})))
    .pipe(gulp.dest(target_path+path.js));

gulp-imagemin遇到的一個問題的處理
No path specified! Can not get relative.
須要加一句：

gulp.task('img',function(){
   gulp.src(extensArray(['png','jpg','gif']))
      .pipe($.filter('*.{jpg,jpeg,svg,gif,png}'))  //加這一句
      .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
      .pipe(gulp.dest(target_path ));
});

接收命令行參數

gulp.env

gulp --key 111 --value 222

gulp.env的值：

gulp.env: { _: [], key: 111, value: 222 }

gulp.env已通過時，可以使用yargs

安裝:

npm install yargs --save-dev

使用：

var argv = require('yargs').argv;

gulp.task('my-task', function() {
    return gulp.src(argv.a == 1 ? options.SCSS_SOURCE : options.OTHER_SOURCE)
        .pipe(sass({style:'nested'}))
        .pipe(autoprefixer('last 10 version'))
        .pipe(concat('style.css'))
        .pipe(gulp.dest(options.SCSS_DEST));
});

判斷文件是否存在

var fs = require(‘fs’);

fs.stat(file, function (err, stat) {
    if (err != null) {
        console.log('輸入的參數錯誤。錯誤代碼：', err.code);
        process.exit(0);
    } else {
    }
});

一些錯誤處理

Error: Cannot find module 'internal/fs'

處理方法：把提示裏的模塊卸載重裝。 

npm remove bower
npm install bower -g
npm install bower --save-dev

 

簡單操做實例：

gulpfile.js

var gulp = require('gulp'); // 引入gulp
var sass = require('gulp-sass'); // 引入gulp-sass,簡化css操做
var cleanCss = require('gulp-clean-css'); // 壓縮css文件,減少文件大小,並給引用url添加版本號避免緩存
var rename = require('gulp-rename'); // 重命名
var concat = require('gulp-concat'); // 合併
var cssmin = require('gulp-cssmin'); // 壓縮css
var uglify = require('gulp-uglify');// js醜化

// 匹配scss文件下的全部.scss文件
var paths = {
  sass: ['./scss/**/*.scss']
};

// 默認執行
gulp.task('default', ['sass']);

/**
 * sass操做任務
 * 執行: $ gulp sass
 * 效果: 當scss文件夾中的.scss文件變化時,在www/css/目錄下生成.css文件
 */
gulp.task('sass', function(done) { // 定義任務
  gulp.src('./scss/*.scss') // 找對象
    .pipe(sass()) // 調用gulp-sass函數
    .on('error', sass.logError) // 報錯日誌打印
    .pipe(gulp.dest('./www/css/')) // 報錯日誌文件保存路徑
    .pipe(cleanCss({
      keepSpecialComments: 0 // '*'保留全部特殊前綴 當你用autoprefixer生成的瀏覽器前綴，若是不加這個參數，有可能將會刪除你的部分前綴
    }))
    .pipe(rename({ extname: '.min.css' })) // 重命名
    .pipe(gulp.dest('./www/css/')) // 生成的css文件保存路徑
    .on('end', done); // 結束任務
});

/**
 * 監控文件變化
 * 執行: $ gulp watch
 * 效果: 當scss文件夾中的.scss文件變化時,自動執行sass操做任務
 */
gulp.task('watch', ['sass'], function() {
  gulp.watch(paths.sass, ['sass']);
});

/**
 * js操做
 * 執行: $ gulp js
 * 效果: 對www/js/路徑下的全部.js文件進行壓縮混淆處理
 */
gulp.task('js', function(done) { // 定義任務
  gulp.src('./www/js/*.js') // 找對象
    .pipe(concat('bundle.js')) // 合併
    .pipe(gulp.dest('./www/js/')) // 合併後文件保存路徑
    .pipe(rename({ extname: '.min.js' })) // 重命名
    .pipe(uglify()) // js醜化
    .pipe(gulp.dest('./www/js/')) // 生成的js壓縮文件保存路徑
    .on('end', done); // 結束任務
});

/**
 * 注: 編寫.scss文件時,執行 $ gulp 便可,默認執行sass操做
 */

.