源码地点：https://github.com/silence717/angular-gulp-seed
建立一个空文件夹名字恣意，此项目为angular-gulp-seed
mkdir angular-gulp-seed初始化工程
npm init建立项目基本目次构造以下：
+src
+app // 营业模块
-app.js // 运用进口
+demo // 营业模块目次，一切子模块均遵照此目次
- module.js // 模块声明文件
- controller.js // vm层
- index.html // 主进口模板
- router.js // 模块路由文件
- style.css // 模块款式
+home
+assets // 静态资本目次
-images
-css
+common // 大众效劳
+components // 大众组件
+scripts // gulp剧本
- gulp.build.js // build使命
- gulp.common.js // dev,build大众使命
- gulp.config.js // 基本设置
- gulp.dev.js // dev使命
index.html // 主页面
package.json正式最先coding
gulp设置部份
1. 装置gulpnpm install gulp -D2. 新建gulpfile文件，装置browser-sync包，设置第一个使命var browserSync = require('browser-sync');
gulp.task('browserSync', function () {
browserSync({
server: {
baseDir: './',
index: 'src/index.html'
}
});
});
gulp.task('default', ['browserSync']);
// 实行gulp敕令，浏览器启动，能够看到大抵页面构造更多browser-sync的信息：http://www.browsersync.cn/。
3. 为了动态插进去新加的js和css文件,且增加的文件有肯定递次，装置gulp系列包。 npm install gulp-watch gulp-inject gulp-order -D4. 新建一个gulp.config.js文件,设置一些基本文件途径和递次module.exports = function () {
var src = './src/';
var build = './dist/';
var config = {
src: src,
build: build,
index: src + 'index.html',
css: [src + '**/*.css'],
appJs: [src + 'app/**/*.js'],
commonJs: [src + 'common/**/*.js'],
componentJs: [src + 'components/**/*.js'],
jsOrder: [
'**/app.js', // 项目主进口
'**/app.*.js', // 主进口响应设置
'**/module.js', // 模块声明
'**/router.js', // 模块路由
'**/index.js', // 组件、resource进口
'**/*.js' // 其他
],
cssOrder: [
'**/app.css', // 项目主模块
'**/*.module.css', // 营业子模块
'**/*.css' // 其他
]
}
return config;
}();5. 运用gulp-inject动态插进去css和js js使命编写
var config = require('./gulp.conf.js');
gulp.task('inject', function() {
var js = gulp.src(config.js, {read: false}).pipe(order(config.jsOrder));
var css = gulp.src(config.css, {read: false}).pipe(order(config.cssOrder));
return gulp
.src(config.index)
.pipe(inject(js, {addPrefix: '../src', relative: true}))
.pipe(inject(css, {addPrefix: '../src', relative: true}))
.pipe(gulp.dest(config.src))
.pipe(browserSync.reload({stream: true}));
});页面增加inject标识
<!-- css -- >
<!-- inject:css -->
<!-- endinject -->
<!-- js -- >
<!-- inject:js -->
<!-- endinject -->增加到default使命中
gulp.task('default', ['inject', 'browserSync']);实行gulp敕令，可看到如图页面结果,同时index.html页面内容发生变化
<!-- inject:css -->
<link rel="stylesheet" href="../src/assets/css/app.css">
<!-- endinject -->
<!-- inject:js -->
<script src="../src/app/app.js"></script>
<!-- endinject -->6. 开辟历程中会不停增加新的css和js文件，为了优化开辟体验，引入gulp-watch包增加watch使命，当js和css文件发生变化的时刻，去实行inject使命var watch = require('gulp-watch');
gulp.task('watch', function() {
watch('src/**/*.js', function() {
gulp.run('inject');
});
watch('src/**/*.css', function() {
gulp.run('inject');
});
});
gulp.task('default', ['inject', 'browserSync', 'watch']);编写营业代码
1. 装置angular相干包npm install angular angular-ui-router --save2. 因为代码量过大，不贴出详细拜见src/spp下面代码完成src/index.html
src/app.js 项目主进口
src/app.router.js 项目路由设置
mock数据效劳
为了前端坚持自力，运用express搭建一个mock效劳，然后我们就可以兴奋的最先开辟了。
1. 起首装置依靠包：npm install express body-parser json-server http-proxy-middleware -D2. 建立server.js，内容以下：var jsonServer = require('json-server');
var server = jsonServer.create();
var middlewares = jsonServer.defaults();
var bodyParser = require('body-parser');
var mockRouter = require('./mock/index');
// 增加默许的中间件 logger, static, cors and no-cache
server.use(middlewares);
// 剖析 body
server.use(bodyParser.json());
server.use(bodyParser.urlencoded({
extended: false
}));
server.use(mockRouter);
server.listen(4000, function() {
console.log('God bless me no bug, http://localhost:4000');
});3. mock文件夹下建立index.js,内容以下：var fs = require('fs');
var express = require ('express');
var router = express.Router();
fs.readdirSync('mock').forEach(function(route) {
if (route.indexOf('index') === -1) {
require('./' + route)(router);
}
});
module.exports = router;4. 引入angular-resource.js，运用$resource效劳npm install angular-resource --save在common/resource/建立一个utils,详细文件为resourceUtils，为一切要求增加一致前缀
(function() {
angular
.module('app.resource')
.factory('resourceUtils', resourceUtils)
.factory('webResource', webResource);
resourceUtils.$inject = ['$resource'];
function resourceUtils($resource) {
return function(apiPrefix) {
return function(url, params, actions) {
return $resource(apiPrefix + url, params, actions);
};
};
}
webResource.$inject = ['resourceUtils'];
function webResource(resourceUtils) {
// 个中***为后端效劳的一致前缀
return resourceUtils('/***/');
}
})();关于$resource效劳的运用，请参考这篇文章。https://silence717.github.io/2016/09/28/creating-crud-app-minutes-angulars-resource/
5. 在gulpfile.js中一致设置代办，而且修正browserSync使命：// 引入http-proxy-middleware
var proxyMiddleware = require('http-proxy-middleware');
// 设置代办途径,是不是为当地mock
var isLocal = true;
var target = '';
if (isLocal) {
target = 'http://localhost:4000';
} else {
// API address
}
// browserSync使命增加代办
gulp.task('browserSync', function() {
var middleware = proxyMiddleware(['/***/'], {target: target, changeOrigin: true});
browserSync({
server: {
baseDir: './',
index: 'src/index.html',
middleware: middleware
}
});
});6. 你能够须要增加一些大众的interceptor去处置惩罚后端返回的数据或许要求失足的一致处置惩罚。详细拜见[https://docs.angularjs.org/api/ng/service/$http](https://docs.angularjs.org/api/ng/service/$http).
至此已能够在当地兴奋的开辟了。
设置gulp编译使命
开辟完成今后代码须要build上线，继承建立一些task。
1. 装置相干依靠包npm install gulp-angular-templatecache gulp-minify-css gulp-if gulp-useref gulp-uglify gulp-replace -D2. 设置build使命，详细在scripts/gulp.build.js文件中.
3. 页面html碰到build的处所设置 ...
<!-- build:css css/app.css -->
<!-- endbuild -->
<!-- build:js js/common.js -->
<!-- endbuild -->
...我将gulp的使命悉数自力出去治理，如许使得gulpfile.js越发清楚
var gulp = require('gulp');
var del = require('del');
var runSequence = require('run-sequence');
var config = require('./scripts/gulp.conf.js');
var buildTask = require('./scripts/gulp.build.js');
var devTask = require('./scripts/gulp.dev.js');
var commonTask = require('./scripts/gulp.common.js');
// 动态增加css和js到index.html
gulp.task('inject', function() {
commonTask.inject();
});
// 增加监听使命
gulp.task('watch', function() {
devTask.watch();
});
// 运用browerSync启动浏览器
gulp.task('browserSync', function() {
devTask.browserSync();
});
// 消灭dist文件
gulp.task('clean', function() {
del(config.build);
});
// 打包组件模板
gulp.task('build:components-templates', function() {
buildTask.componentsTemplate();
});
// 打包营业模板
gulp.task('build:app-templates', function () {
buildTask.appTemplate();
});
// build index文件
gulp.task('build', ['build:components-templates', 'build:app-templates'], function() {
buildTask.buildIndex();
});
// 当地开辟
gulp.task('default', ['inject', 'browserSync', 'watch']);
// 线上环境打包
gulp.task('dist', ['clean'], function() {
runSequence('inject', 'build');
});在package.json中设置剧本
"scripts": {
"start": "concurrently \"gulp\" \"node server.js\""
}实行npm start即可当地启动项目
上线兼并代码的时刻实行
gulp dist敕令即可
迁延症晚期，终究写完了。有时间会到场eslint校验,增加md5，增加sass等等。。。须要做的另有许多，看心境吧！
