Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
grunt example
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(String(options.base)),
// 启用目录浏览(相当于IIS中的目录浏览)
connect.directory(String(options.base))
];
};
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// 发布目录
releaseDir: '../build',
concat: {
options: {
separator: ';',
stripBanners: true,
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %> */'
},
dist: {
src: ['src/js/*.js'],
dest: 'build/js/<%= pkg.name %>.js'
}
},
uglify: {
build: {
files: [{
expand: true,
cwd: '0.2/assets/js',
src: '*.js',
dest: 'build/assets/js',
ext:'.js'
}],
options: {
banner: '/*! Creat by <%= pkg.author %> @<%= grunt.template.today("yyyy-mm-dd") %> */\n'
}
}
},
cssmin: {
compress: {
files: [{
expand: true,
cwd: '0.2/assets/style/css',
src: '*.css',
dest: 'build/assets/style/css',
ext:'.css'
}],
options: {
banner: '/*! Creat by <%= pkg.author %> @<%= grunt.template.today("yyyy-mm-dd") %> */\n'
}
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: '0.2/assets/img',
src: ['**/*.{png,jpg,gif}'],
dest: 'build/assets/img/'
}],
options: {
//解决图片压缩0KB的Bug
cache: false
}
}
},
htmlhint: {
build: {
options: {
'tag-pair': true,
'tagname-lowercase': true,
'attr-lowercase': true,
'attr-value-double-quotes': true,
'spec-char-escape': true,
'id-unique': true,
'head-script-disabled': true,
},
src: ['0.2/pages/*.html']
}
},
copy: {
pages: {
expand: true,
cwd: '0.2/pages/',
src: '*.html',
dest: 'build/pages',
flatten: true,
filter: 'isFile',
},
iconfonts: {
expand: true,
cwd: '0.2/assets/iconfont',
src: '*',
dest: 'build/assets/iconfont',
flatten: true,
filter: 'isFile',
}
},
less: {
options: {
paths: ['0.2/assets/style']
},
files: {
expand: true,
cwd: '0.2/assets/style/less',
src: '*.less',
dest: '0.2/assets/style/css',
ext: '.css'
}
},
// for livereload
connect: {
options: {
// 服务器端口号
port: 8080,
hostname: 'localhost',
base: '.'
},
livereload: {
options: {
// 通过LiveReload脚本,让页面重新加载。
middleware: lrMiddleware
}
}
},
// 监控文件变化, 然后 打包/刷新浏览器
watch: {
html: {
files: ['0.2/pages/*.html'],
tasks: ['newer:htmlhint']
},
less: {
files: ['0.2/assets/style/less/*.less'],
// newer只监测新增文件
tasks: ['newer:less']
},
javascript: {
files: ['*.js'],
tasks: ['newer:jshint']
},
livereload: {
// 我们不需要配置额外的任务,watch任务已经内建LiveReload浏览器刷新的代码片段。
options: {
livereload: lrPort
},
// '**' 表示包含所有的子目录
// '*' 表示包含所有的文件
files: ['0.2/pages/*','0.2/assets/**/*','!0.2/assets/style/css/*.css'],
}
},
jshint: {
// define the files to lint
files: ['gruntfile.js', '0.2/**/*.js'],
// configure JSHint (documented at http://www.jshint.com/docs/)
options: {
// more options here if you want to override JSHint defaults
globals: {
//大括号包裹
curly: true,
//对于简单类型,使用===和!==,而不是==和!=
eqeqeq: true,
//对于属性使用aaa.bbb而不是aaa['bbb']
sub: true,
//查找所有未定义变量
undef: true,
//查找类似与if(a = 0)这样的代码
boss: true,
jQuery: true,
console: true,
module: true
}
}
}
});
// 加载提供任务的插件
//JS合并工具
grunt.loadNpmTasks('grunt-contrib-concat');
//JS压缩工具
grunt.loadNpmTasks('grunt-contrib-uglify');
//JS语法检查工具
grunt.loadNpmTasks('grunt-contrib-jshint');
//less编译工具
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
//监测当个文件修改
grunt.loadNpmTasks('grunt-newer');
//图片压缩工具
grunt.loadNpmTasks('grunt-contrib-imagemin');
//CSS压缩工具
grunt.loadNpmTasks('grunt-contrib-cssmin');
//html语法检查
grunt.loadNpmTasks('grunt-htmlhint');
//拷贝文件
grunt.loadNpmTasks('grunt-contrib-copy');
// build
grunt.registerTask('build', ['less','uglify','cssmin','imagemin','copy']);
//默认任务为Build
grunt.registerTask('default', ['build']);
// livereload, 监控文件修改, 然后刷新浏览器
grunt.registerTask('live', ['connect', 'watch']);
};
@sunyuhui

This comment has been minimized.

Copy link

sunyuhui commented Apr 24, 2015

有很大帮助,谢谢啦

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.