前端自动化工具grunt介绍

grunt已过时,请看我的关于gulp的教程

教程链接:http://developer.51cto.com/art/201506/479127.htm

目录结构:


Gruntfile.js >>

module.exports = function(grunt) {
    //任务配置,所有插件的配置信息
    grunt.initConfig({
        //获取package.json的信息
        pkg: grunt.file.readJSON('package.json'),
        //uglify插件的配置信息
        uglify: {
            options: {
                stripBanners: true,
                banner: '/*! <%=pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'src/base.js',
                dest: 'build/<%=pkg.name%>-<%=pkg.version%>.js.min.js'
            }
        },
        //jshint插件的配置信息
        jshint: {
            options: {
                jshintrc: '.jshintrc'//此文件需要是ANSI编码
            },
            build: ['Gruntfile.js', 'src/*.js']
        },
        watch: {
            build: {
                files: ['src/*.js', 'src/*.css'],
                tasks: ['jshint', 'uglify'],
                options: {
                    spawn: false
                }
            }
        }
    });
    //告诉grunt我们将使用插件
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-watch');
    //告诉grunt当我们在终端输入grunt时需要做些什么
    grunt.registerTask('default', ['jshint', 'uglify', 'watch']);
};
package.json >>

{
  "name": "grunt_test",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-jshint": "^1.0.0",
    "grunt-contrib-uglify": "^2.0.0",
    "grunt-contrib-watch": "^1.0.0"
  }
}
.jshintrc >>

{
	"boss": false,
	"curly": true,
	"eqeqeq": true,
	"eqnull": true,
	"expr": true,
	"immed": true,
	"newcap": true,
	"noempty": true,
	"noarg": true,
	"undef": true,
	"regexp": true,
	"browser": true,
	"devel": true,
	"node": true
}





你可能感兴趣的:(前端自动化工具grunt介绍)