本文重点是细致引见Angular.js项目的构建。gulp是优异的自动化项目构建东西，我们将用它完成 javascript/less/css/html/images/fonts 等文件的的测试、搜检、兼并、紧缩、花样化、浏览器自动革新、布置文件天生，并监听文件在修正后反复指定的这些步骤(热重载)。bower是项目依靠治理东西。
环境需求
gulp运转在nodejs环境，起首装置nodejs。平常npm会随nodejs一同装置,npm（node package manager）是nodejs的包治理器，用于node插件治理（包含装置、卸载、治理依靠等）。能够用node -v检察装置的nodejs版本以及npm -v`检察npm的版本号。
装置bower：$ npm install -g bower。
在windows环境中，git bsah 装置bower会涌现毛病，能够在切换到cmd中装置。
初始化项目
$ cd d:/develop #定位到develop目次
$ mkdir angular-gulp-bower-seed #新建项目目次
$ cd angular-gulp-bower-seed #进入项目目次
$ npm init #初始化项目，并在项目项目中自动天生package.json文件
$ bower init #新建bower.json此时项目初始化终了，能够最先装置项目依靠
#其他项目依靠也用此敕令装置，这些依靠将自动装置到bower_component文件夹下，在代码中引入制订的位置即可
$ bower install angular jquery bootstrap --save-dev装置时运用–save将自动保存设置信息至bower.json的dependencies数组中，运用–save-dev将自动保存设置信息至bower.json的devDependencies数组中。
保存至bower.json后，其他开辟者对应下载即可（敕令提示符实行bower install，则会依据bower.json下载一切依靠包，bower install –production只下载dependencies节点的包）。
装置gulp东西包
$ npm install -g gulp #全局装置gulp后能够在敕令行中运用gulp敕令，实行gulp使命
$ npm install --save-dev gulp $当地装置gulp插件，以便在设置文件中挪用gulp插件的功用
$ npm install autoprefixer-core babel-preset-es2015 browser-sync gulp-autoprefixer gulp-babel gulp-changed gulp-clean gulp-clean-css gulp-concat gulp-csso gulp-htmlmin gulp-jshint gulp-load-plugins gulp-ng-annotate gulp-ng-html2js gulp-rename gulp-rev gulp-rev-collector gulp-sequence gulp-size gulp-uglify gulp-useref http-server jasmine-core jshint jshint-stylish url --save-dev #装置插件构建项目目次
项目目次组织以下：
angular-gulp-bower-seed
│ .bowerrc //bower装置包目次设置
│ .gitignore
│ bower.json
│ gulpfile.js //gulp设置文件，打包处置惩罚，开启效劳等等
│ LICENSE
│ mockAPI.js //组织.json数据文件后，经由过程读取文件体式格局模仿API要求，在前后端开辟进度不一致时异常有效
│ package.json
│ README.md
│
├─app //项目开辟目次
│ │ angular.png.ico //ico图标
│ │ app.js //angular项目大众设置，包含主模块建立，路由设置，http阻拦处置惩罚等
│ │ index-dist.html // 供gulp编译，引入打包后的文件（script/styles/fonts）
│ │ index.html SPA项目进口
│ │
│ ├─bower_components //bower治理的依靠库
│ │ ├─angular
│ │ ├─angular-bootstrap
│ │ ├─angular-cookies
│ │ ├─angular-local-storage
│ │ ├─angular-md5
│ │ ├─angular-resource
│ │ ├─angular-route
│ │ ├─angular-ui
│ │ ├─angular-ui-router
│ │ ├─bootstrap
│ │ └─jquery
│ ├─data //构建json花样的静态数据（mock datas）
│ │ csrfToken.json
│ │ login.json
│ │
│ ├─public //项目大众资源，包含字体，图片
│ │ ├─css
│ │ ├─fonts
│ │ └─images
│ │
│ └─src //项目源代码
│ ├─controllers //控制器相干代码，语义化定名
│ │ appControllers.js
│ │
│ ├─directives //自定义指令相干代码
│ │ │ directives.js //指令剧本
│ │ │
│ │ └─tpls //指令模板文件夹
│ │ datepicker.html
│ │ modal.html
│ │ pagination.html
│ │
│ ├─filters //过滤器代码
│ │ filters.js
│ │
│ ├─services //效劳代码
│ │ apiServices.js //与API要求相干效劳
│ │ app.util.js //大众效劳
│ │ services.js //其他
│ │
│ ├─styles //项目款式文件夹
│ │ app.css
│ │ directives.css
│ │ page1.css
│ │ page2.css
│ │
│ └─templates //项目视图文件夹
│ │ app.html
│ │ login.html
│ │ noRight.html
│ │
│ ├─modalViews //模态框视图文件夹
│ │
│ ├─page1Views //按营业分别视图1文件夹
│ │
│ └─page2Views //按营业分别视图2文件夹
│
│
├─appDist //项目编译打包后天生目次设置gulpfile.js
var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');
var $ = plugins = gulpLoadPlugins();
var autoprefixer = require('gulp-autoprefixer');
var ngHtml2Js = require("gulp-ng-html2js");
var gulpif = require('gulp-if');
var uglify = require('gulp-uglify');//Minify JavaScript with UglifyJS2.
var cleanCSS = require('gulp-clean-css');
var htmlmin = require('gulp-htmlmin');
var jshint = require('gulp-jshint'); //jshint检测javascript的语法毛病
var useref = require('gulp-useref');
var csso = require('gulp-csso');
var concat = require('gulp-concat');
var rename = require("gulp-rename");
const babel = require('gulp-babel');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var url = require('url');
var mockApi = require('./mockApi');
var distFolderUrl = "appDist";
gulp.task('clean', function () {
return require('del')([distFolderUrl + '/**','tmp/**','dist/**']);
});
gulp.task('templatesTpls', function () {
return gulp.src([
'./app/src/directives/tpls/*.html',
])
.pipe(ngHtml2Js({
moduleName: "myApp",
prefix: "src/directives/tpls/"
}))
.pipe(concat("templatesTpls.min.js"))
.pipe(babel({
presets: ['es2015']
}))
.pipe(uglify())
.pipe(gulp.dest('./tmp/templates'))
});
gulp.task('templatesViews', function () {
return gulp.src([
'./app/src/templates/**/*.html'
])
.pipe(ngHtml2Js({
moduleName: "myApp",
rename:function (templateUrl, templateFile) {
var pathParts = templateFile.path.split('\\');
var file = pathParts[pathParts.length - 1];
var folder = pathParts[pathParts.length - 2];
if ("templates" === folder) {
return "./src/templates/" + file
} else {
return "./src/templates/" + folder + '/' + file
}
}
}))
.pipe(concat("templatesViews.min.js"))
.pipe(babel({
presets: ['es2015']
}))
.pipe(uglify())
.pipe(gulp.dest('./tmp/templates'))
});
gulp.task('copyTemplatesToDist', function () {
return gulp.src([
'./app/src/templates/**/*.html',
])
.pipe(gulp.dest(distFolderUrl + '/src/templates'));
});
gulp.task('copyTplsToDist', function () {
return gulp.src([
'./app/src/directives/tpls/**/*.html',
])
.pipe(gulp.dest(distFolderUrl + '/src/directives/tpls'));
});
// gulp.task('font', function() {
// return gulp.src(['./app/public/fonts/**/*'], {base: './app/'})
// .pipe(gulp.dest(distFolderUrl + ''))
// });
// gulp.task('images', function() {
// return gulp.src(['./app/public/images/**/*'], {base: './app/'})
// .pipe(gulp.dest(distFolderUrl + ''))
// });
gulp.task('public', function() {
return gulp.src(['./app/public/**/*','./app/*.ico'], {base: './app/'})
.pipe(gulp.dest(distFolderUrl))
});
gulp.task('vendorCss',function () {
return gulp.src(['./app/bower_components/**/*.css'])
.pipe(gulp.dest(distFolderUrl + '/vendor'))
})
gulp.task('vendorFont',function () {
return gulp.src([ './app/bower_components/bootstrap/dist/fonts/**'])
.pipe(gulp.dest(distFolderUrl + '/vendor/bootstrap/dist/fonts'))
})
gulp.task('vendorJs',function () {
return gulp.src('./app/bower_components/**/*.js')
.pipe(gulp.dest(distFolderUrl + '/vendor'))
})
// gulp.task('vendor', ['vendorCss', 'vendorJs', 'vendorFont']);
gulp.task('vendor', function () {
return gulp.src(['./app/bower_components/**/*'])
.pipe(gulp.dest(distFolderUrl + '/vendor'))
});
var cssList = [
'./app/src/styles/app.css',
'./app/src/styles/*.css'
];
gulp.task('css', function() {
return gulp.src(cssList)
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(concat('app.min.css'))
.pipe(cleanCSS())
.pipe(gulp.dest(distFolderUrl + '/static/css'))
})
var jsList = [
'./app/*.js',
'./app/src/directives/*.js',
'./app/src/controllers/*.js',
'./app/src/services/*.js',
'./app/src/filters/*.js',
'./tmp/templates/*.js',
];
gulp.task('jshint', function () {
return gulp.src(jsList)
.pipe(reload({stream: true, once: true}))
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'))
});
// gulp.task('js', ['jshint'], function () {
gulp.task('js', ['templatesTpls','templatesViews'], function () {
return gulp.src(jsList)
.pipe(concat('app.min.js'))
.pipe(babel({
presets: ['es2015']
}))
.pipe(uglify({
mangle: false,//范例：Boolean 默许：true 是不是修正变量名
compress: false,//范例：Boolean 默许：true 是不是完整紧缩
preserveComments: 'all' //保存解释
}).on('error', function(e){
console.log(e);
}))
.pipe(gulp.dest(distFolderUrl + '/static/js'))
});
gulp.task('htmlVendor', function () {
return gulp.src(['app/index-vendor.html'])
.pipe(useref({ searchPath: ['app'] }))
// .pipe(rename('index1.html'))
.pipe(gulpif('*.js', uglify({
mangle: false,
compress: false,
preserveComments: 'all'
})))
.pipe(gulpif('*.css', csso()))
// .pipe(gulpif('*.html', htmlMinify({conditionals: true, loose: false})))
.pipe(gulp.dest(distFolderUrl));
});
// gulp.task('html', ['copyTemplatesToDist', 'copyTplsToDist'], function () {
gulp.task('html', function () {
return gulp.src(['app/index-dist.html'])
.pipe(rename('index.html'))
.pipe(gulp.dest(distFolderUrl))
})
gulp.task('build', ['public','vendor','js','css','html'], function () {
return gulp.src(distFolderUrl + '/**/*').pipe($.size({title: 'build', gzip: true}));
});
gulp.task('default', ['clean'], function () {
gulp.start('build');
});
// var files = [
// 'app/**/*.html',
// 'app/**/*.css',
// 'app/**/*.js',
// 'app/public/**/*',
// 'app/data/**/*'
// ];
gulp.task('serve', function () {
browserSync({
notify: false, // Don't show any notifications in the browser.
port: 8081,
open: false,
server: {
baseDir: ['app'],
routes: {
// 'bower_components': 'bower_components',//if bower_components' path is up the tree of app
},
middleware:
function (req, res, next) {
var urlObj = url.parse(req.url, true),
method = req.method,
paramObj = urlObj.query;
mockApi(res, urlObj.pathname, paramObj, next);
}
}
});
// watch for changes
gulp.watch([
'app/**/*.html',
'app/**/*.css',
'app/**/*.js',
'app/public/**/*',
'app/data/**/*'
]).on('change', reload);
gulp.watch('app/src/**/*.less', ['styles', reload]);
gulp.watch('bower.json', ['fonts', reload]);
});
gulp.task('serve-release', function () {
browserSync({
notify: false,
port: 8081,
server: {
baseDir: [distFolderUrl]
}
});
});
运转gulp使命
gulp <taskName>
$ gulp clean #清空编译目次
$ gulp build #编译打包
$ gulp serve #开启开辟环境效劳器 http://localhost:8080
$ gulp serve-release #开启临盆环境效劳器 http://localhost:8081