grunt例子:https://github.com/Aquarius1993/gruntDemo
grunt 实时刷新1：
1.安装chrome浏览器插件：liveReload
2.npm install grunt-contrib-watch connect-livereload --save-dev
3. //监听事件
watch: {
js: {
files: ['src/js/**/*.js'],
tasks: ['clean', 'jshint', 'copy', 'concat:concatsass', 'sass', 'concat:build', 'uglify', 'includereplace', 'usemin'],
options: {
livereload: true
}
}
}
4.
grunt.registerTask('dev', [ 'watch']);
然后启动本地服务器打开我们的页面（wamp/node/sublimeServer/ ）
5.再点击Chrome LiveReload插件的ICON，当ICON圆圈中心的小圆点变成实心的，说明插件执行成功.
6.可以修改 保存 浏览器看效果
grunt 实时刷新2：（不需要安装浏览器插件）
1.npm install grunt-contrib-watch connect-livereload grunt-contrib-connect serve-static serve-index --save-dev
2.载入 serve-static serve-index：初始化liveReload
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
});
// 使用 middleware(中间件)，就必须关闭 LiveReload 的浏览器插件
var lrMiddleware = function(connect, options) {
return [
// 把脚本，注入到静态文件中
lrSnippet,
// 静态文件服务器的路径
serveStatic(options.base[0]),
// 启用目录浏览(相当于IIS中的目录浏览)
serveIndex(options.base[0])
];
};
3.新建connect任务：
connect: {
options: {
// 服务器端口号
port: 8000,
// 服务器地址(可以使用主机名localhost，也能使用IP)
hostname: 'localhost',
// 物理路径(默认为. 即根目录) 注：使用'.'或'..'为路径的时，可能会返回403 Forbidden. 此时将该值改为相对路径 如：/grunt/reloard。
base: '.'
},
livereload: {
options: {
// 通过LiveReload脚本，让页面重新加载。
middleware: lrMiddleware
}
}
},
4.修改watch任务：
watch: {
js: {
files: ['src/js/**/*.js'],
tasks: ['clean', 'jshint', 'copy', 'concat:concatsass', 'sass', 'concat:build', 'uglify', 'includereplace', 'usemin'],
options: {
livereload: lrPort
}
}
},
5.别忘记载入watch connect
6.
grunt.registerTask('dev', [ ‘connect','watch’])
,然后启动grunt dev
打开http://localhost:8000/到指定的文件，（或者本地的服务器）
7.修改watch里注册的文件即可看到实时效果
8.完整的gruntfile.js
module.exports = function(grunt) {
var timestamp = new Date().getTime();
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
});
// 使用 middleware(中间件)，就必须关闭 LiveReload 的浏览器插件
var lrMiddleware = function(connect, options) {
return [
// 把脚本，注入到静态文件中
lrSnippet,
// 静态文件服务器的路径
serveStatic(options.base[0]),
// 启用目录浏览(相当于IIS中的目录浏览)
serveIndex(options.base[0])
];
};
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
options: {
// 服务器端口号
port: 8666,
// 服务器地址(可以使用主机名localhost，也能使用IP)
// 物理路径(默认为. 即根目录) 注：使用'.'或'..'为路径的时，可能会返回403 Forbidden. 此时将该值改为相对路径 如：/grunt/reloard。
base: '.'
},
livereload: {
options: {
// 通过LiveReload脚本，让页面重新加载。
middleware: lrMiddleware
}
}
},
watch: {
js: {
files: ['src/js/*.js','!src/js/index.js','src/sass/*.scss','src/*.html','!src/sass/all.scss'],
tasks: ['clean' ,'concat:concatsass', 'concat:dev','sass','uglify:build','copy','cssmin:build', 'usemin'],
options: {
livereload: lrPort
}
}
},
//文件合并
concat: {
options: {
//定义一个用于插入合并输出文件之间的字符
seperator: ';'
},
prod: {
//将要合并的文件
// src:['src/**/*.js'],
//合并后的js文件的存放位置
// dest:['build/<%= pkg.name %>.js']
files: { // Dictionary of files
'src/css/main.css': ['src/css/*.css'],
'src/js/index.js': ['src/js/*.js',"!src/js/env_dev.js",'!src/js/*.min.js'],
}
},
dev: {
files: { // Dictionary of files
'src/css/main.css': ['src/css/*.css'],
'src/js/index.js': ['src/js/*.js',"!src/js/env_prod.js",'!src/js/*.min.js'],
}
},
concatsass: {
files: {
'src/sass/all.scss': ['src/sass/*.scss']
}
}
},
//压缩js
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
files:{
'dist/js/index.min.js':'src/js/index.js',
}
}
},
//压缩html
htmlmin: {
options: { // Target options
removeComments: true,//去注释
removeCommentsFromCDATA: true,
collapseWhitespace: true // 去换行
},
html: {
files: [{ // Dictionary of files
expand: true,
cwd: 'dist',
src: ['*.html'],
dest: 'dist' //'destination':'source'
}]
}
},
//css压缩
cssmin: {
options: {
//shorthandCompactiong:false,
roundingPercision: -1 //这个属性应该是将样式相同的都提取出来
},
build: {
files: {
'dist/css/main.min.css': 'src/css/main.css',
}
}
},
//处理html中css、js 引入合并问题
usemin: {
html: 'dist/*.html',
options: {
blockReplacements: {
js: function(block) {
return '<script type="text/javascript" src="' + block.dest + '?t=' + timestamp + '"></script>';
},
css: function(block) {
return '<link rel="stylesheet" type="text/css" href="' + block.dest + '?t=' + timestamp + '"/>';
}
}
}
},
//copy
copy: {
src: {
files: [
{ expand: true, cwd: 'src/css', src: ['*.min.css'], dest: 'dist/css' },
{ expand: true, cwd: 'src/js', src: ['*.min.js'], dest: 'dist/js' },
{ expand: true, cwd: 'src/', src: ['*.html'], dest: 'dist' },
]
},
image: {
files: [
{ expand: true, cwd: 'src/images', src: ['*.{png,jpg,jpeg,gif,ico}'], dest: 'dist/images' }
]
}
},
sass: {
dist: {
options: { // Target options
style: 'expanded'
},
files: {
'src/css/all.css': 'src/sass/all.scss'
}
}
},
//清理文件
clean: {
html: ['dist/*.html'],
sass: ['src/sass/all.scss'],
css: ['dist/css','src/css/main.css'],
js: ['dist/js','src/js/index.js'],//,
images: ['dist/images']
}
});
//加载包含"uglify" 任务的插件
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-copy');
//grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-usemin');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-include-replace');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
//默认被执行的任务列表
grunt.registerTask('devT', ['connect','watch'])
grunt.registerTask('prod', ['clean' ,'concat:concatsass','sass', 'concat:prod','uglify:build','copy','cssmin:build','htmlmin' , 'usemin']);
grunt.registerTask('dev', ['clean' ,'concat:concatsass', 'sass','concat:dev','uglify:build','copy','cssmin:build', 'usemin']);
};
9.package.json
{
"name": "applicationForm",
"version": "0.1.0",
"description": "",
"main": "Gruntfile.js",
"directories": {
"test": "test"
},
"dependencies": {
"grunt-sass": "^1.1.0"
},
"devDependencies": {
"connect-livereload": "^0.6.0",
"grunt": "^0.4.5",
"grunt-contrib-clean": "^1.0.0",
"grunt-contrib-coffee": "^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.1",
"grunt-contrib-htmlmin": "^1.4.0",
"grunt-contrib-requirejs": "^1.0.0",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-uglify": "^1.0.1",
"grunt-contrib-watch": "^1.0.0",
"grunt-usemin": "^3.1.1",
"properties-reader": "^0.0.15",
"serve-index": "^1.8.0",
"serve-static": "^1.11.1"
},
"scripts": {
"start": "grunt devT",
"prod": "grunt prod",
"dev": "grunt dev"
},
"author": "liheyao",
"license": "ISC"
}