grunt-笔记

package.json:

{
"name": "grunt-uglify",
"version": "1.0.0",
"description": "lichir",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "lichir",
"license": "ISC",
"devDependencies": {
"connect-livereload": "^0.6.0",
"grunt": "^1.0.1",
"grunt-contrib-clean": "^1.0.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-connect": "^1.0.2",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-cssmin": "^1.0.2",
"grunt-contrib-imagemin": "^1.0.1",
"grunt-contrib-jshint": "^1.0.0",
"grunt-contrib-uglify": "^2.0.0",
"grunt-contrib-watch": "^1.0.0",
"grunt-open": "^0.2.3",
"grunt-rev": "^0.1.0",
"grunt-usemin": "^3.1.1",
"load-grunt-tasks": "^3.5.2",
"serve-index": "^1.8.0",
"serve-static": "^1.11.1"
}
}

module.exports = function(grunt){
"use strict";
require('load-grunt-tasks')(grunt);
// grunt.loadNpmTasks('grunt-contrib-uglify');
// grunt.loadNpmTasks('grunt-contrib-jshint');
// grunt.loadNpmTasks('grunt-contrib-watch');
// grunt.loadNpmTasks('grunt-contrib-copy');
// grunt.loadNpmTasks('grunt-contrib-concat');

var serveStatic = require('serve-static');
var serveIndex = require('serve-index');
var lrPort = 35729;
// 使用connect-livereload模块，生成一个与LiveReload脚本
// <script src="http://127.0.0.1:35729/livereload.js?snipver=1" type="text/javascript"></script>
var lrSnippet = require('connect-livereload')({ port: lrPort });
var lrMiddleware = function(connect, options, middlwares) {
return [
lrSnippet,
// 静态文件服务器的路径
serveStatic(options.base[0]),
// 启用目录浏览(相当于IIS中的目录浏览)
serveIndex(options.base[0])
];
};

grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
/* js代码压缩 */
uglify: {
options: {
banner: '/*! 顶部信息 <%= grunt.template.today("yyyy-mm-dd hh:mm:ss") %> */\n',
footer:'\n/*! 最后修改于： <%= grunt.template.today("yyyy-mm-dd hh:mm:ss") %> */',
preserveComments: false, //不删除注释，还可以为 false（删除全部注释）
mangle: false //不混淆变量名
},
//压缩 init.js, util.js, labels.js
build1: {
files: {
'assets/compile/js/init_util_labels.min.js': ['assets/js/init.js','assets/js/util.js','assets/config/labels.js']
}
},
//压缩 fastclick.js, zepto.js, template.js
build2: {
files: {
'assets/compile/js/fastclick_zepto_template.min.js': ['assets/lib/fastclick.js','assets/lib/zepto.min.js','assets/lib/template.js']
}
},
//压缩 all.js
build3: {
files: {
'assets/compile/js/all.min.js': ['assets/compile/js/fastclick_zepto_template.min.js','assets/compile/js/init_util_labels.min.js']
}
},
//按原文件结构压缩js文件夹内所有JS文件
buildall: {
files: [{
expand:true, // 设置为true，表示要支持cwd等更多配置
cwd:'assets/lib', // 所有的源文件路径，都是相对于js
src:'**/*.js', // 所有js文件
dest:'output/lib', // 输出到此目录下
ext: '.min.js' // 生成文件的名字
}]
},
//任务5：合并concat任务生成的合并文件
buildconcat: {
files: {
'output/<%= pkg.name %>.min.js': ['<%= concat.build1.dest %>']
}
}
},
/*css代码压缩*/
cssmin: {
build1: {
files: [{
expand:true,
cwd: 'assets/css',
src:'common.css',
dest: 'assets/compile/css',
ext: '.min.css'
}]
}
},
/*图片压缩*/
imagemin:{
options: {
optimizationLevel: 3 //定义 PNG 图片优化水平
},
build1:{
files: [{
expand: true,
cwd: 'assets/images',
src: ['**/*.{png,jpg,gif}'],
dest:'out/img/'
}]
}
},
/*删除代码*/
clean:{
build1: {
src: [
'assets/compile/css/common.min.css',
'assets/compile/js/init_util_labels.min.js',
'assets/compile/js/fastclick_zepto_template.min.js',
'assets/compile/js/all.min.js',
]
}
},
/*代码合并*/
concat: {
options: {
// 定义一个用于插入合并输出文件之间的字符
separator: ';'
},
build1: {
src: ['assets/js/init.js','assets/js/util.js','assets/config/labels.js'],
dest:'assets/compile/js/main.js'
}
},
/*语法检测*/
jshint: {
build1: ['assets/js/util.js'],
options: {
browser: true,
devel: true
}
},
/*文件监听*/
watch: {
build1: {
files: ['assets/js/init.js','assets/js/util.js','assets/config/labels.js'],
tasks: ['uglify:build1']
},
build2: {
files: ['htmls-pad/payment.js'],
tasks: ['jshint:build1']
},
/*配合connect 的 task 使用，实现及时更新*/
client: {
options: {livereload: lrPort},
files: ['htmls-pad/*.html','htmls-pad/*.js','assets/js/*.js']
}
},
/*
文件更新后自动浏览器自动刷新,相关插件:
1: grunt-contrib-watch
2: grunt-contrib-connect
3: connect-livereload
4: serve-static
5: serve-index
*/
connect: {
options: {
port: 8400,
hostname: '127.0.0.1',//localhost
base: '.'
},
livereload: {
options: {
// 通过LiveReload脚本，让页面重新加载。
middleware: lrMiddleware
}
}
},
/*自动打开：grunt-open*/
open :{
dev : {
path:'http://127.0.0.1:8400',
app: 'Chrome'
}
},
/*
文件名前加入md5字符串 : grunt-rev ,
替换模板里的链接为更改后的 : grunt-usemin
*/
rev: {
options: {
algorithm: 'md5',
length: 8
},
assets: {
files: [{
expand:true,
cwd: 'assets/compile/css',
src:'*.css'
}]
}
},

useminPrepare: {
html: ['app/tpl/**/*.html'],
options:{
dest: 'build/tpl'
}
},
usemin: {
html: ['build/tpl/**/*.html'],
options: {
assetsDirs: ['build/js']
}
},
/*拷贝文件*/
copy: {
html:{
files: [{
expand:true,
cwd: 'app/',
src: ['tpl/**/*.html'],
dest: 'build/'
}]
},
}
});
// 默认任务
grunt.registerTask('default', [
'clean',
'uglify:build1',
'uglify:build2',
'uglify:build3',
'cssmin:build1'
]);
grunt.registerTask('cb1', ['concat:build1']);
grunt.registerTask('jb1', ['jshint:build1']);
grunt.registerTask('wb1', ['watch:build1']);
/*浏览器自动刷新*/
grunt.registerTask('live', ['connect','open:dev','watch:client']);

grunt.registerTask('a', ['useminPrepare','usemin']);
}
// * 匹配任意多个字符，除了 /
// ? 匹配除了 / 之外的单个字符
// ** 匹配任意多个字符，包括 /
// {} 匹配用逗号分割的 or 列表
// ! 用在模式的开通，表示取反
//
//
//
//
// 安装项目初始目录
// npm install -g generator-webapp
// yo webapp grunt-yo-webapp

// sudo npm install -g generator-webapp@v0.6.2