gruntjs配置
Gruntjs官网:http://gruntjs.com/api/grunt
Gruntjs是前端项目构建工具,基于node的命令行工具,并且语法是采用json。主要功能:
- 合并文件
- 压缩html/js/css/图片文件
- 语法检测
- 单元测试(基于Qunit)
- watch功能
每个GruntJS都包括两个文件:
- package.json:依赖模块+你可能用到的变量和说明,例如:version、name
- Gruntfile.js:node module写法的任务管理文件,里面包括要合并和压缩的文件以及路径
主要的文件内容如下:
module.exports = function(grunt) { // 以下代码初始化Grunt任务 grunt.initConfig({ // js语法检查 jshint: { … }, // 需要合并的任务 concat: { … }, // 压缩 uglify: { … }, // watch任务 watch: { … } }); // 加载package.json中的想用插件 grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-watch'); // 注册一个任务,第二参数可以是数组或者字符串 // 默认会执行default任务. grunt.registerTask('default', ['jshint', 'concat', 'uglify']); };
这里有篇文章是主要讲gruntjs文件的合并和压缩:http://www.cnblogs.com/snandy/archive/2013/03/11/2949177.html
推荐一篇比较详细配置的:http://js8.in/1124.html
另外,还可以用JSHint检查js语法。JSHint是JSLint的一个分支,可以用于js语法规则、错误检测...
watch功能是Grunt的实时处理任务,当监控的文件发生变化的时候,则执行相应的任务.
var concatArr = [ 'src/intro.js', 'src/getCurrentScript.js', 'src/vars.js', 'src/typeof.js', 'src/browser.js', 'src/Module.js', 'src/Promise.js', 'src/getPath.js', 'src/loadjs.js', 'src/loadcss-img.js', 'src/core.js', 'src/outro.js']; module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), jshint: { options: { noarg: true, noempty: true, curly: true, asi: true, expr: true, browser: true, strict: true, unused: true, undef: true, loopfunc: false, sub: true, boss: true, eqnull: true }, files: ['tmp/<%= pkg.name %>.js'] }, watch: { files: ['src/*.js'], tasks: 'dev' }, concat: { MixJS: { options: { separator: '\n' }, src: concatArr, dest: 'lib/<%= pkg.name %>.<%= pkg.version %>.js' }, dev: { options: { separator: '\n' }, src: concatArr, dest: 'tmp/<%= pkg.name %>.js' } }, uglify: { options: { sourceMap: 'lib/<%= pkg.name %>.<%= pkg.version %>.map', banner: '/*! <%= pkg.name %> <%= pkg.version %> <%= grunt.template.today("yyyy-mm-dd") %> by <%= pkg.author %> */\n' }, dist: { src: '<%= concat.MixJS.dest %>', dest: 'lib/<%= pkg.name %>.<%= pkg.version %>.min.js' } }, compress: { main: { options: { archive: '<%= pkg.name %>.zip' }, files: [{ expand: true, cwd: 'lib', src: ['**'], filter: 'isFile' }] } } }); // grunt.loadNpmTasks('grunt-regarde'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-compress'); grunt.registerTask('build', ['concat:MixJS', 'uglify']); grunt.registerTask('dev', ['concat:dev', 'jshint']); };