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 <task> <othertask>。

插件

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