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 。

插件

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