angularjs項目下的gulp配置（一）

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

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

gulp安裝

---

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

$ npm install -g gulp

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

$ npm install --save-dev gulp

三、在項目根目錄下建立一個名爲gulpfile.js的配置文件，添加一些簡單的內容以下。

var gulp = require('gulp');

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

四、運行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相關的兩個插件，可能有些同窗還不知道，同時也歡迎你們吐槽。