gruntjs配置

Gruntjs官网:http://gruntjs.com/api/grunt

Gruntjs是前端项目构建工具,基于node的命令行工具,并且语法是采用json。主要功能:

  1. 合并文件
  2. 压缩html/js/css/图片文件
  3. 语法检测
  4. 单元测试(基于Qunit)
  5. watch功能

每个GruntJS都包括两个文件:

  1. package.json:依赖模块+你可能用到的变量和说明,例如:version、name
  2. 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']);
	
};

  

posted @ 2013-05-03 09:15  GM_Lv  阅读(178)  评论(0编辑  收藏  举报