{
"name": "grunt-live-test",
"version": "0.1.0",
"author": "liujin",
"devDependencies": {
"connect-livereload": "^0.5.2",
"grunt": "^0.4.2",
"grunt-contrib-connect": "^0.7.1",
"grunt-contrib-cssmin": "^0.10.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-newer": "^1.1.0"
}
}
module.exports = function(grunt) {
// LiveReload的默认端口号,你也可以改成你想要的端口号
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,
// 静态文件服务器的路径
connect.static(options.base),
// 启用目录浏览(相当于IIS中的目录浏览)
connect.directory(options.base)
];
};
// 项目配置(任务配置)
grunt.initConfig({
// 读取我们的项目配置并存储到pkg属性中
pkg: grunt.file.readJSON('package.json'),
// 通过connect任务,创建一个静态服务器
connect: {
options: {
// 服务器端口号
port: 8000,
// 服务器地址(可以使用主机名localhost,也能使用IP)
hostname: 'localhost',
// 物理路径(默认为. 即根目录) 注:使用'.'或'..'为路径的时,可能会返回403 Forbidden. 此时将该值改为相对路径 如:/grunt/reloard。
base: '.'
},
livereload: {
options: {
// 通过LiveReload脚本,让页面重新加载。
middleware: lrMiddleware
}
}
},
// 通过watch任务,来监听文件是否有更改
watch: {
client: {
// 我们不需要配置额外的任务,watch任务已经内建LiveReload浏览器刷新的代码片段。
options: {
livereload: lrPort
},
// '**' 表示包含所有的子目录
// '*' 表示包含所有的文件
files: ['./*.html', 'css/*.css', 'js/*.js', 'images/**/*']
},
css:{
files: ['css/*.css'],
tasks: ['newer:cssmin:mifify']
}
},
cssmin: {
options: {
banner: '/*creat: <%= new Date() %> */', //文件头部输出信息
beautify: { //美化代码
ascii_only: true //中文ascii化,非常有用!防止中文乱码的神配置
},
compatibility : 'ie7', //设置兼容模式
noAdvanced : true //取消高级特性
},
mifify:{
files: [
{
expand: true, // 启用下面的选项
cwd: 'css/', // 相对路径
src: ['*.css', '!*.min.css'], // 匹配相对于cwd目录下的所有css文件(排除.min.css文件)
dest: 'dest/css', // 生成的压缩文件存放的路径
ext: '.min.css' // 生成的文件都使用.min.css替换原有扩展名
}
]
}
}
}); // grunt.initConfig配置完毕
// 监控html js css
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-newer');
grunt.registerTask('live', ['connect', 'watch']);
};