源码地址：https://github.com/silence717/angular-gulp-seed创建一个空文件夹，名称任意，本项目为angular-gulp-seedmkdirangular-gulp-seed初始化项目npminit创建项目的基本目录结构如下：+src+app//业务模块-app.js//应用入口+demo//业务模块目录，所有子模块都在这个目录下-module.js//模块声明文件-controller.js//vm层-index.html//主入口模板-router.js//模块路由文件-style.css//模块样式+home+assets//静态资源目录-images-css+common//publicservice+components//publiccomponent+scripts//gulpscript-gulp.build.js//buildtask-gulp.common.js//dev,buildcommontask-gulp.config.js//basicsConfiguration-gulp.dev.js//devtaskindex.html//主页面package.json正式开始codinggulp配置part1.安装gulpnpminstallgulp-D2。新建一个gulpfile，安装browser-sync包，配置第一个taskvarbrowserSync=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安装gulp-watchgulp-injectgulp-order-D4。新建一个gulp.config.js文件，配置一些基本的文件路径和命令module.exports=function(){varsrc='./src/';varbuild='./dist/';varconfig={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',//modulerouting'**/index.js',//组件，资源入口'**/*.js'//other],cssOrder:['**/app.css',//projectmainModule'**/*.module.css',//业务子模块'**/*.css'//other]}returnconfig;}();5.使用gulp-inject动态插入css和jsjs任务写varconfig=require('./gulp.conf.js');gulp.task('注入',function(){varjs=gulp.src(config.js,{read:false}).pipe(order(config.jsOrder));varcss=gulp.src(config.css,{read:false}).pipe(order(config.cssOrder));returngulp.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}));});页面添加注入标志添加到默认任务gulp.task('default',['inject','browserSync']);执行gulp命令，可以看到如图所示的页面效果，同时index.html页面内容发生变化6.在开发过程中，会不断添加新的css和js文件。为了优化开发体验，引入了gulp-watch包来增加watch任务。当js的css文件发生变化时，执行注入任务varwatch=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相关包npminstallangularangular-ui-router--save2.由于代码量较大，请参考下面src/spp代码实现src/index.htmlsrc/app.js项目主入口src/app.router.js项目路由配置mock数据服务为了保持前端的独立性，使用express搭建一个mock服务，然后我们就可以愉快的开始开发了1.首先安装依赖包：npminstallexpressbody-parserjson-serverhttp-proxy-middleware-D2。使用以下内容创建server.js：varjsonServer=require('json-server');varserver=jsonServer.create();varmiddlewares=jsonServer.defaults();varbodyParser=require('body-parser');varmockRouter=require('./mock/index');//添加默认中间件logger、static、cors和no-cacheserver.use(middlewares);//解析bodyserver.use(bodyParser.json());server.use(bodyParser.urlencoded({extended:false}));server.use(mockRouter);server.listen(4000,function(){console.log('上帝保佑我没有错误，http://localhost:4000');});3、在mock文件夹下创建index.js，内容如下：varfs=require('fs');varexpress=require('express');varrouter=express.Router();fs.readdirSync('mock').forEach(function(route){if(route.indexOf('index')===-1){require('./'+route)(router);}});module.exports=路由器；4．导入angular-resource.js，使用$resourceservicenpminstallangular-resource--save在common/resource/创建一个utils，具体文件为resourceUtils，为所有请求添加一个统一的前缀$resource'];functionresourceUtils($resource){returnfunction(apiPrefix){returnfunction(url,params,actions){return$resource(apiPrefix+url,params,actions);};};}webResource.$inject复制代码=['resourceUtils'];functionwebResource(resourceUtils){//其中***为后端服务统一前缀returnresourceUtils('/***/');}})();关于$resource服务的使用，请参考这篇文章https://silence717.github.io/2016/09/28/creating-crud-app-minutes-angulars-resource/5。在gulpfile.js中统一代理配置，修改browserSync任务：//引入http-proxy-middlewarevarproxyMiddleware=require('http-proxy-middleware');//配置代理路径，是否为本地mockvarisLocal=true;变种目标='';if(isLocal){target='http://localhost:4000';}else{//API地址}//browserSync任务添加代理gulp.task('browserSync',function(){varmiddleware=proxyMiddleware(['/***/'],{target:target,changeOrigin:true});browserSync({server:{baseDir:'./',index:'src/index.html',middleware:middleware}});});6.可能需要添加一些公共拦截器来处理客户端返回的数据或者请求错误的统一处理。有关详细信息，请参阅[https://docs.angularjs.org/api/ng/service/$http](https://docs.angularjs.org/api/ng/service/$http)。到此为止你就可以享受本地开发了。配置gulp编译任务开发完成后，需要构建并启动代码，继续创建一些任务。1、安装相关依赖包npminstallgulp-angular-templatecachegulp-minify-cssgulp-ifgulp-userefgulp-uglifygulp-replace-D2。配置构建任务，特别是在scripts/gulp.build.js文件3中。页面html遇到build的配置......我独立管理所有gulp任务，这使gulpfile.js更清晰vargulp=require('gulp');vardel=require('del');varrunSequence=require('run-sequence');varconfig=require('./scripts/gulp.conf.js');varbuildTask=require('./scripts/gulp.build.js');vardevTask=require('./scripts/gulp.dev.js');varcommonTask=require('./scripts/gulp.common.js');//动态添加css和js到index.htmlgulp.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('构建：components-templates',function(){buildTask.componentsTemplate();});//封装业务模板gulp.task('build:app-templates',function(){buildTask.appTemplate();});//构建索引文件gulp.task('build',['build:components-templates','build:app-templates'],function(){buildTask.buildIndex();});//本地开发gulp.task('default',['inject','browserSync','watch']);//在线环境打包gulp.task('dist',['clean'],function(){runSequence('注入','构建');});在package.json中配置脚本"scripts":{"start":"concurrently\"gulp\"\"nodeserver.js\""}执行npmstart在线启动项目并在本地合并执行gulpdist命令时写代码可以拖拖拉拉，等到时间终于写完了，eslint验证，md5，sass等都会加进去。..还有很多事情要做，让我们看看我们的感受吧！
