分享一个AngularJS+gulp自动化配置

packjson
{
  "name": "app",
  "version": "1",
  "description": "Demo",
  "main": "index.html",
  "private": true,
  "scripts": {
    "dev": "gulp dev",
    "prod": "gulp prod"
  },
  "author": "",
  "license": "",
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-concat": "^2.6.0",
    "gulp-angular-templatecache": "^1.7.0",
    "gulp-connect": "^2.2.0",
    "gulp-ng-annotate": "^1.0.0",
    "gulp-uglify": "^1.2.0",
    "event-stream": "~3.3.1",
    "lodash": "^4.0.0"
  }
}
gulp.js
var es = require('event-stream');
var gulp = require('gulp');
var concat = require('gulp-concat');
var connect = require('gulp-connect');
var templateCache = require('gulp-angular-templatecache');
var ngAnnotate = require('gulp-ng-annotate');
var uglify = require('gulp-uglify');
var fs = require('fs');
var _ = require('lodash');

var scripts = require('./app.scripts.json');
var source = {
    js: {
        main: 'app/main.js',
        src: [
            // application config
            'app.config.js',
            // application bootstrap file
            'app/main.js',
            // main module
            'app/app.js',
            // module files
            'app/**/module.js',
            // other js files [controllers, services, etc.]
            'app/**/!(module)*.js'
        ],
        tpl: 'app/**/*.tpl.html'
    }
};
var destinations = {
    js: 'build'
};
gulp.task('build', function(){
    return es.merge(gulp.src(source.js.src) , getTemplateStream())
         .pipe(ngAnnotate())
         .pipe(uglify())
        .pipe(concat('app.js'))
        .pipe(gulp.dest(destinations.js));
});
gulp.task('js', function(){
    return es.merge(gulp.src(source.js.src) , getTemplateStream())
        .pipe(concat('app.js'))
        .pipe(gulp.dest(destinations.js));
});
gulp.task('watch', function(){
    gulp.watch(source.js.src, ['js']);
    gulp.watch(source.js.tpl, ['js']);
});
gulp.task('connect', function() {
    connect.server({
        port: 8888
    });
});
gulp.task('vendor', function(){
    _.forIn(scripts.chunks, function(chunkScripts, chunkName){
        var paths = [];
        chunkScripts.forEach(function(script){
            var scriptFileName = scripts.paths[script];
            if (!fs.existsSync(__dirname + '/' + scriptFileName)) {
                throw console.error('Required path doesn\'t exist: ' + __dirname + '/' + scriptFileName, script)
            }
            paths.push(scriptFileName);
        });
        gulp.src(paths)
            .pipe(concat(chunkName + '.js'))
            //.on('error', swallowError)
            .pipe(gulp.dest(destinations.js))
    })
});

gulp.task('prod', ['vendor', 'build']);
gulp.task('dev', ['vendor', 'js', 'watch', 'connect']);
gulp.task('default', ['dev']);
var swallowError = function(error){
    console.log(error.toString());
    this.emit('end')
};
var getTemplateStream = function () {
    return gulp.src(source.js.tpl)
        .pipe(templateCache({
            root: 'app/',
            module: 'app'
        }))
};
目录结构
分享一个AngularJS+gulp自动化配置_第1张图片
目录.PNG

你可能感兴趣的:(分享一个AngularJS+gulp自动化配置)