Gulp minify及concat

一、Gulp安裝可參考至：http://selfdesigning.blogspot.tw/2015/11/gulp-plugin.html，此篇介紹如何撰寫gulpfils.js來壓縮及合併Angular所撰寫的程式碼。
二、由於Angularjs具有DI的特性，因此可以藉由ng-annotate，來將 Implicite Dependencies轉換為Inline Array Annotation形式，如此一來模糊化程式碼時就能順利壓縮。

   (一)Implicite Dependencies 
     app.controller(‘appController’, function ($scope, service) {  
      /..../  
     })  
     (二)Inline Array Annotation 
     app.controller(‘MyCtrl’, [‘$scope’,  ‘myService’, function ($scope, s) {  
      /..../  
     })  

三、安裝ng-annotate

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

四、gulpfile.js

	var gulp = require('gulp' ),
	minifycss = require( 'gulp-minify-css'),
	uglify = require('gulp-uglify'),
	rename = require('gulp-rename'),
	clean = require('gulp-clean'),
	concat = require('gulp-concat'),
	cache = require('gulp-cache'),
	livereload = require( 'gulp-livereload'),
	connect = require('gulp-connect'),
	ngAnnotate = require( 'gulp-ng-annotate'),
	sourcemaps = require( 'gulp-sourcemaps')
	gulp.task('buildJs', function () {
	return gulp.src([ 'js/controllers/*.js', 'js/directive/*.js' , 'js/filters/*.js', 'js/services/*.js' ])
	.pipe(ngAnnotate()) //使用ngAnnotate轉換為Inline Array Annotation，防止注入錯誤
	.pipe(concat( 'rewardRecord.min.js'))
	.pipe(uglify({
	mangle: true
	}))
	.pipe(gulp.dest( './dist/')); //輸出目錄
	});
	gulp.task('buildCss', function () {
	return gulp.src([ 'css/*.css'])
	.pipe(sourcemaps.init())
	.pipe(concat( 'rewardRecord.min.css'))
	.pipe(minifycss()) //最小化css
	.pipe(sourcemaps.write())
	.pipe(gulp.dest( './dist/')); //輸出目錄
	});
	gulp.task('server', function () {//建立臨時Server
	connect.server({
	livereload: true
	});
	});
	gulp.task('html', function () {
	gulp.src(['*.html', 'views/**/*.html', 'views/*.html'])
	.pipe(connect.reload());
	});
	gulp.task('js', function () {
	gulp.src(['js/controllers/*.js', 'js/directive/*.js', 'js/filters/*.js' , 'js/services/*.js'])
	.pipe(connect.reload());
	});
	gulp.task('css', function () {
	gulp.src(['css/*.css'])
	.pipe(connect.reload());
	});
	gulp.task('language', function () {
	gulp.src(['language/*.json'])
	.pipe(connect.reload());
	});
	gulp.task('watch', function () {
	gulp.watch(['*.html', 'views/**/*.html', 'views/*.html'], ['html' ]);
	gulp.watch(['js/controllers/*.js', 'js/directive/*.js', 'js/filters/*.js' , 'js/services/*.js'], ['js' ]);
	gulp.watch(['language/*.json'], [ 'language']);
	gulp.watch(['css/*.css'], [ 'css']);
	});
	gulp.task('default', ['buildJs', 'buildCss']);

view raw build.js hosted with ❤ by GitHub