Created
March 23, 2014 16:20
-
-
Save besteric/9725411 to your computer and use it in GitHub Desktop.
grunt example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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']); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
有很大帮助,谢谢啦