angglarjs項目下の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というタスクが実行されます.gulp defaultを実行するのと同じです.ここでは、このタスクは何も行われていません.個別に特定のタスクを実行したい場合は、gulp <task>を入力してください.真ん中にスペースがありますよ.
ここに来て、gulp環境をインストールする方法を学びました.次に私達はanglar環境を実行するgulp file.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');

ここではangglar関連のプラグインを重点的に紹介します.

gulp-ng-html2js
gulp-ng-annotate

gulp-ng-html 2 js
gulp-html 2 jsはangglarの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>');
}]);
})();

テンプレートの内容はtemplateCacheに入れられています.もちろん、ここでは例を挙げるだけで、本当のhtmlの内容はこれだけではありません.あまり気にしないでください.
glp-ng-annotate
gulp-ng-annotateは、注入されたプラグインに依存してアングラルjsを処理します.その使い方は以下の通りです.

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

普通、私たちはアングラーコードを書いています.このようにしています.

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

しかし、このプラグインを使用した後、注入に依存するエントリはもう二回書かなくてもいいです.

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

gulp-ng-annotateは中かっこの書き方を作るのを手伝ってくれます.このように多くの重複作業を省きましたか?特に、注入されたサービスが非常に多い場合は、コードを多く書くことができますし、順序が間違っていないか心配しなくてもいいです.
今日はまずここまで紹介します.重点的にanglarjsに関するプラグインを紹介しました.一部の学生はまだ知らないかもしれません.同時に、皆さんのツッコミも歓迎します.