angularjs項目下的gulp配置（一）

這是我的一個線上產品的真正gulp配置，可能不是最好的解決方案，但卻是一個能用的方案

首先我們需要nodejs環境，沒有安裝過的同學，請參照nodejs官方文檔，下載相應的安裝包安裝即可，我當前使用的nodejs版本為4.2.6 LTS。這里假設已經安裝好了nodejs環境，下面開始介紹gulp。

gulp安裝

---

1、全局安裝gulp，這個是在命令行中執行用的。

$ npm install -g gulp

2、 在項目根目錄下安裝gulp，這個是在gulp配置文件中用的。

$ npm install --save-dev gulp

3、在項目根目錄下創建一個名為gulpfile.js的配置文件，添加一些簡單的內容如下。

var gulp = require('gulp');

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

4、運行gulp。

$ gulp

執行這行命令，將會運行默認名為 default 的任務（task），它和執行gulp default是一樣的，在這里，這個任務並未做任何事情。想要單獨執行特定的任務（task），請輸入 gulp <task>。請注意，中間是有空格的哦。

到這里，你已經學會如何安裝gulp環境，接下來我們將開始配置一個運行angular環境的gulpfile.js。

gulp插件

---

首先我們先來看看用到了哪些gulp的插件

var gulp = require('gulp'),
    del = require('del'),
    //autoprefixer = require('gulp-autoprefixer'),
    changed = require('gulp-changed'),
    concat = require('gulp-concat'),
    //connect = require('gulp-connect'),
    htmlReplace = require('gulp-html-replace'),
    htmlmin = require('gulp-htmlmin'),
    inject = require('gulp-inject'),
    jshint = require('gulp-jshint'),
    //livereload = require('gulp-livereload'),
    ngHtml2js = require('gulp-ng-html2js'),
    minifyCss = require('gulp-minify-css'),
    ngAnnotate = require('gulp-ng-annotate'),
    rename = require('gulp-rename'),
    replace = require('gulp-replace'),
    rev = require('gulp-rev'),
    sass = require('gulp-sass'),
    sequence = require('gulp-sequence'),
    //sourcemaps = require('gulp-sourcemaps'),
    uglify = require('gulp-uglify');

這里我們重點介紹一下angular相關插件

gulp-ng-html2js
gulp-ng-annotate

gulp-ng-html2js

---

gulp-ng-html2js是一個處理angular里templateCache的插件，它會把所有的html模板合並存儲到一個js當中，用法如下

gulp.task('build-html', function () {
    return gulp.src(['src/app/**/*.html', 'src/common/**/*.html'])
        .pipe(htmlmin())
        .pipe(ngHtml2js({
            moduleName: 'template-app'
        }))
        .pipe(concat('template.tpl.js'))
        .pipe(gulp.dest(buildDir + '/js'));
});

執行gulp build-html后生成的template.tpl.js的代碼如下，這里只列舉出一部分

(function(module) {
try {
  module = angular.module('template-app');
} catch (e) {
  module = angular.module('template-app', []);
}
module.run(['$templateCache', function($templateCache) {
  $templateCache.put('create/header/navBtn.tpl.html',
    '<li ng-class="{\'active\': isMe()}" ng-click="showMe()"><div ng-transclude></div><i ng-show="isMe()" class="arrow"></i></li>');
}]);
})();

(function(module) {
try {
  module = angular.module('template-app');
} catch (e) {
  module = angular.module('template-app', []);
}
module.run(['$templateCache', function($templateCache) {
  $templateCache.put('create/sideMenu/background.tpl.html',
    '<div class="eqc-background-panel" ng-class="{\'on\': backgroundPanel.isShow}"><div class="set-item"><span>背景顏色</span><eqd-input-color select-color="background.change" default-color="\'rgba(208,207,216,1)\'"></eqd-input-color></div></div>');
}]);
})();

可以看到html模板里的內容都被放到templateCache里方便我們使用了，當然，這里只是舉一個例子，真正的html內容肯定不只是這么一點了，大家不用太糾結。

gulp-ng-annotate

---

gulp-ng-annotate是一個處理angularjs依賴注入的插件，它的用法如下

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

正常我們寫angular代碼是這樣子的

angular.module('app', [])
    .controller('AppCtrl', ['$scope', function($scope) {
        // 別的代碼
    }])

但使用了這個插件之后，每一個依賴注入的項就不用再寫兩遍了，如

angular.module('app', [])
    .controller('AppCtrl', function($scope) {
        // 別的代碼
    })

gulp-ng-annotate會幫我們生成帶中括號的寫法 ，這樣子是不是節省了很多重復工作呢？尤其是在注入的服務非常多的時候，可以少寫很多代碼，並且也不用擔心順序有沒有寫錯。

今天我們先介紹到這，重點介紹了和angularjs相關的兩個插件，可能有些同學還不知道，同時也歡迎大家吐槽。