创建一个空文件夹名字任意，此项目为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. 安装gulp
npm install gulp -D
2. 新建gulpfile文件，安装browser-sync包，配置第一个任务
var browserSync = require('browser-sync')
gulp.task('browserSync', function () {
browserSync({ server: { baseDir: './', index: 'src/index.html'
}
})
})
gulp.task('default', ['browserSync'])// 执行gulp命令，浏览器启动，可以看到大致页面结构
3. 为了动态插入新加的js和css文件,且添加的文件有一定顺序，安装gulp系列包。
npm install gulp-watch gulp-inject gulp-order -D
4. 新建一个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 --save
2. 由于代码量过大，不贴出具体参见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 -D
2. 创建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-cacheserver.use(middlewares)// 解析 bodyserver.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('/***/')
}
})()
5. 在gulpfile.js中统一配置代理，并且修改browserSync任务：
// 引入http-proxy-middlewarevar proxyMiddleware = require('http-proxy-middleware')// 配置代理路径,是否为本地mockvar isLocal = truevar 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去处理后端返回的数据或者请求出错的统一处
至此已经可以在本地愉快的开发了。
配置gulp编译任务
开发完成以后代码需要build上线，继续创建一些task。
1. 安装相关依赖包npm install gulp-angular-templatecache gulp-minify-css gulp-if gulp-useref gulp-uglify gulp-replace -D
2. 配置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.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('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等等。。。需要做的还有很多，看心情吧！
1.首先，在项目根目录下创建一个文件package.json ，内容如下：{ "name": "demo", "version": "0.1.0-SNAPSHOT", "description": "spring-boot and angularJS", "private": true, "dependencies": {}, "devDependencies": { //项目需要依赖的前端插件(注意：拷贝进去时这段注释要删掉)"gulp": "^3.9.0","gulp-util": "^3.0.7","gulp-cssnano": "^2.1.0","gulp-htmlmin": "^1.3.0","gulp-imagemin": "^2.4.0","gulp-uglify": "^1.5.1","gulp-filter": "^3.0.1","gulp-replace": "^0.5.4","gulp-useref": "^3.0.5","gulp-autoprefixer": "^3.1.0","gulp-ng-annotate": "^1.1.0","gulp-sass": "^2.1.1","gulp-rev": "^6.0.1","gulp-rev-replace": "^0.4.3","gulp-flatten": "^0.2.0","gulp-jshint": "^2.0.0","gulp-htmlhint": "^0.3.1","jshint-stylish": "^2.1.0","htmlhint-stylish": "^1.0.3","wiredep": "^3.0.0","browser-sync": "^2.11.1","del": "^2.2.0","http//:baidu.com": "^0.9.1"
}
}
2.其次，cmd进入项目根目录，运行命令npm install，它将把package.json中声明的依赖插件都down下来，并在项目根目录下生成文件夹node_modules,并将插件保存在其中。
3.在项目根目录下创建一个文件gulpfile.js，内容如下：
"use strict"
var gulp = require('gulp'), //将上面down下来的插件都要引入，以便需要
gutil = require('gulp-util'),
wiredep = require('wiredep').stream
gulp.task('html', function() { // 创建task任务:可以在cmd命令中执行任务
gulp.src('src/main/webapp/index.html')
.pipe(wiredep({ // 调用插件wiredep执行方法
optional: 'configuration',
goes: 'here'：http://www.baidu.com/}))
.pipe(gulp.dest('src/main/webapp'))
})
4.接着在项目根目录下创建一个文件:.bowerrc,创建完毕后在IDE中会被隐藏。文件内容如下:
{ "directory" : "src/main/webapp/bower_components"}
http://r.yuzhua.com
显而易见，这个文件的作用是指定bower install时，下载的angularJS等插件存放的目录位置。如果没有这个文件，那么通过bower命令下载的插件将会被保存在项目根目录下。
5.在项目根目录下创建文件:bower.json，内容如下:：http://www.baidu.com/
{ "name": "demo", "description": "spring-boot and angularJS", "version": "0.1.0-SNAPSHOT", "keywords": ["the first project of spring-boot and angularJS"
], "private": true, "ignore": ["**/.*","node_modules","src/main/webapp/bower_components","src/main/webapp/lib","src/main/java","src/main/resources","src/test","target"
], "dependencies": { //依赖的插件，bower install时将会下载的插件，具体作用自行百度（拷贝进去时这段注释要删掉）"angular": "1.5.5","angular-resource": "1.5.5","angular-cookies": "1.5.5","angular-messages": "1.5.5","angular-animate": "1.5.5","angular-sanitize": "1.5.5","angular-aria": "1.5.5","angular-route": "1.5.5","angular-i18n": "1.5.5","angular-material": "1.0.4","angular-ui-router": "0.2.15","angular-ui-validate": "1.2.2","codemirror": "5.14.2","angular-ui-codemirror": "0.3.0","angular-loading-bar": "0.9.0","angular-local-storage": "0.2.7","angular-material-data-table": "0.10.9","angular-once": "0.1.9","moment": "2.10.6","angular-moment": "1.0.0-beta.3","Chart.js": "1.0.2","angular-chart.js": "0.8.8","angular-filter": "0.5.8","ng-file-upload": "^12.0.4","editor.md": "1.5.0","jquery": "3.1.0"：http://www.baidu.com/ }, "devDependencies": {"angular-moc：http://www.baidu.com/ks": "1.5.5","angular-scenario": "1.5.5"
}, "resolutions": {"angular": "1.5.5","Chart.js": "1.0.2","moment": "2.10.6"
}
