gulp 在 angular 項目中的使用

gulp 在 angular 項目中的使用

keyword:gulp,angularjs,ng,ngAnnotate,jshint,gulpfile

最後附完整簡潔的ng項目gulpfile.js

準備

全局安裝gulp

npm install --global gulp

項目開發依賴devDependencies安裝

npm install --save-dev gulp

在項目根目錄下建立一個名爲 gulpfile.js 的文件

var gulp = require('gulp');

gulp.task('default', function() {
  // 將你的默認的任務代碼放在這
});

運行 gulp

gulp

默認的名爲 default 的任務（task）將會被運行，在這裏，這個任務並未作任何事情
想要單獨執行特定的任務（task），請輸入

gulp <task> <othertask>。

插件

jshint js代碼檢查

全局安裝jshint

npm install -g jshint

開發依賴devDependencies安裝

npm install --save-dev jshint

gulpfile.js中新增task

gulp.task('jshint', function () {
  return gulp.src('./www/js/**/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

運行

gulp jshint

gulp-ng-annotate 支持ng依賴注入聲明方式

Add angularjs dependency injection annotations with ng-annotate

開發依賴devDependencies安裝

npm install --save-dev gulp-ng-annotate

使用

gulp.task('build-app-js', function () {
    return gulp.src('./www/**/*.js')
        .pipe(ngAnnotate({single_quotes: true}))
        .pipe(gulp.dest('./www/dist'))
});

附，完整、簡單的ng項目gulpfile.js

var gulp = require('gulp');
var ngAnnotate = require('gulp-ng-annotate');
var ngmin = require('gulp-ngmin');
var stripDebug = require('gulp-strip-debug');
var concat = require('gulp-concat');
//var minifyCss = require('gulp-minify-css');//尚不考慮css壓縮
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var jshint = require('gulp-jshint');

//執行壓縮混淆前，先執行jshint
gulp.task('default', ['jshint'], function() {
  gulp.start('minifyjs');
});

//壓縮，合併 js
gulp.task('minifyjs',function() {
  return gulp.src('./www/js/**/*.js')      //須要操做的文件
    .pipe(concat('main.js'))    //合併全部js到main.js
    .pipe(gulp.dest('./www/dist'))       //輸出到文件夾
    .pipe(rename({suffix: '.min'}))   //rename壓縮後的文件名
    .pipe(ngAnnotate())
    .pipe(ngmin({dynamic: false}))//Pre-minify AngularJS apps with ngmin
    .pipe(stripDebug())//除去js代碼中的console和debugger輸出
    .pipe(uglify({outSourceMap: false}))    //壓縮
    .pipe(gulp.dest('./www/dist'));  //輸出
});

gulp.task('jshint', function () {
  return gulp.src('./www/js/**/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

開發依賴安裝指令：

npm install --save-dev gulp-ng-annotate
npm install --save-dev gulp-ngmin
npm install --save-dev gulp-strip-debug
npm install --save-dev gulp-concat
npm install --save-dev gulp-minify-css
npm install --save-dev gulp-rename
npm install --save-dev gulp-uglify
npm install --save-dev gulp-jshint //需提早把jshint 安裝好

[原創]，轉載請附帶原文地址：http://www.cnblogs.com/sloong/p/5209390.html