npm install gulp-uglify --save-dev
全局安装：
npm install gulp-uglify -g
整站静态文件压缩配置文件gulpfile.js（html/css/image/js前提是安装下列require用到的模块）：
var gulp = require('gulp'),//基础库
htmlmin = require('gulp-htmlmin'),//html压缩
cssmin = require('gulp-minify-css'),//css压缩
jshint = require('gulp-jshint'),//js检查
uglify = require('gulp-uglify'),//js压缩
imagemin = require('gulp-imagemin'),//图片压缩
pngquant = require('imagemin-pngquant'),//图片深入压缩
imageminOptipng = require('imagemin-optipng'),
imageminSvgo = require('imagemin-svgo'),
imageminGifsicle = require('imagemin-gifsicle'),
imageminJpegtran = require('imagemin-jpegtran'),
domSrc = require('gulp-dom-src'),
cheerio = require('gulp-cheerio'),
processhtml = require('gulp-processhtml'),
Replace = require('gulp-replace'),
cache = require('gulp-cache'),//图片压缩缓存
clean = require('gulp-clean'),//清空文件夹
conCat = require('gulp-concat'),//文件合并
plumber=require('gulp-plumber'),//检测错误
gutil=require('gulp-util')//如果有自定义方法，会用到
var date = new Date().getTime()
gulp.task('clean',function(){
return gulp.src('min/**',{read:false})
.pipe(clean())
})
function errrHandler( e ){
// 控制台发声,错误时beep一下
gutil.beep()
gutil.log(e)
this.emit('end')
}
gulp.task('cleanCash', function (done) {//清除缓存
return cache.clearAll(done)
})
gulp.task('htmlmin', function () {
var options = {
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: false,//省略布尔属性的值 <input checked="true"/>==><input />
removeEmptyAttributes: false,//删除所有空格作属性值 <input id="" />==><input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
}
gulp.src(['index/*.htm','index/*.html'])
.pipe(plumber({errorHandler:errrHandler}))
.pipe(Replace(/_VERSION_/gi, date))
.pipe(processhtml())
.pipe(htmlmin(options))
.pipe(gulp.dest('min'))
})
gulp.task('cssmin', function(){
gulp.src('index/**/*.css')
.pipe(conCat('css/index.min.css'))
.pipe(plumber({errorHandler:errrHandler}))
.pipe(cssmin({
advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
keepBreaks: false,//类型：Boolean 默认：false [是否保留换行]
keepSpecialComments: '*'
//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
}))
.pipe(gulp.dest('min'))
})
gulp.task('jsmin', function () {
gulp.src(['index/js/*.js','!index/**/{text1,text2}.js'])
.pipe(conCat('js/index.min.js'))
.pipe(plumber({errorHandler:errrHandler}))
.pipe(uglify({
mangle: {except: ['require' ,'exports' ,'module' ,'$']},//类型：Boolean 默认：true 是否修改变量名
compress: true,//类型：Boolean 默认：true 是否完全压缩
preserveComments: 'false' //保留所有注释
}))
.pipe(gulp.dest('min'))
})
gulp.task('imagemin', function () {
gulp.src('index/**/*.{png,jpg,gif,ico}')
.pipe(plumber({errorHandler:errrHandler}))
.pipe(cache(imagemin({
progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性
use: [pngquant(),imageminJpegtran({progressive: true})
, imageminGifsicle({interlaced: true}),imageminOptipng({optimizationLevel:3}), imageminSvgo()] //使用pngquant深度压缩png图片的imagemin插件
})))
.pipe(gulp.dest('min'))
})
gulp.task('default',['clean'],function(){
gulp.start('cssmin','htmlmin','jsmin','imagemin')
})
package.json(例子) package.json详细介绍：https://docs.npmjs.com/files/package.json
（package.json npm init 命令行创建文件方法http://blog.csdn.net/liyanhui1001/article/details/44020235 ）
{
"name": "web",
"version": "1.0.0",
"description": "my text",
"main": "gulpfile.js",
"dependencies": {
"gulp": "^3.9.1",
"gulp-cache": "^0.4.5",
"gulp-concat": "^2.6.0",
"gulp-htmlmin": "^2.0.0",
"gulp-imagemin": "^3.0.1",
"gulp-jshint": "^2.0.1",
"gulp-minify-css": "^1.2.4",
"gulp-plumber": "^1.1.0",
"gulp-uglify": "^1.5.4",
"gulp-util": "^3.0.7",
"imagemin-pngquant": "^5.0.0",
"jshint": "^2.9.2",
"gulp-clean": "^0.3.2"
},
"devDependencies": {
"gulp-cheerio": "^0.6.2",
"gulp-dom-src": "^0.2.0",
"gulp-jslint": "^1.0.1",
"gulp-processhtml": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-webpack": "^1.5.0",
"imagemin-gifsicle": "^5.1.0",
"imagemin-jpegtran": "^5.0.2",
"imagemin-optipng": "^5.1.1",
"imagemin-svgo": "^5.1.0",
"webpack": "^1.13.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" &&exit 1"
},
"keywords": [
"web"
],
"author": "yl",
"license": "ISC"
}
devDependencies里的内容即为你安装gulp的模块插件名称和版本号！
最后，node.js里指定到当前项目目录下输入gulp命令即可：
gulp default
创建一个空文件夹名字任意，此项目为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等等。。。需要做的还有很多，看心情吧！
