node下使用grunt管理js文件项目

node下使用grunt管理js文件项目

node下使用grunt管理js文件项目

1、使用npm init命令初始化包配置管理文件package.json
2、添加插件npm插件
npm install grunt --save-dev
npm install grunt-cli --save-dev
npm install grunt-babel --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-uglify --save-dev

最后package.json配置文件如下所示

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "a.js",
  "dependencies": {
    "babel": "^5.8.21",//es6转es5
    "webpack": "^1.10.5"//网站开发将多个js文件打包成一个js文件的工具，暂时没有用到
  },
  "devDependencies": {
    "grunt": "^0.4.5",//js项目文件构建工具
    "grunt-babel": "^5.0.1",//grunt集成babel，将es6转成es5
    "grunt-cli": "^0.1.13",//客户端命令行工具
    "grunt-contrib-concat": "^0.5.1",//将多个js文件合并成一个js文件工具
    "grunt-contrib-jshint": "^0.11.2",//验证js语法工具，不支持es6语法
    "grunt-contrib-uglify": "^0.9.1"//将js压缩工具
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

添加grunt配置文件gruntfile.js如下所示：

module.exports = function(grunt) {  
  //配置参数，grunt配置文件
  grunt.initConfig({  
     pkg: grunt.file.readJSON('package.json'),
     jshint: {
         options:{
             "curly": true,
            "eqnull": true,
            "eqeqeq": true,
            "undef": false,
             esnext: true
         },
         all: ['a.js','b.js']
     },
     babel: {
         dist:{
             'out/a.js':'a.js',
             'out/b.js':'b.js'
         }
     },
     concat: {  
         options: {  
             separator: ';',  
             stripBanners: true  
         },  
         dist: {  
             src: [  
                 "out/a.js",  
                 "out/b.js"
             ],  
             dest: "out/default.js"  
         }  
     },  
     uglify: {  
         options: {  
         },  
         dist: {  
             files: {  
                 'out/default.min.js': 'out/default.js'  
             }  
         }  
     }
  });  
   
  //载入concat和uglify插件，分别对于合并和压缩  
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-babel');
  grunt.loadNpmTasks('grunt-contrib-concat');  
  grunt.loadNpmTasks('grunt-contrib-uglify');  
  /*
  grunt.loadNpmTasks('grunt-contrib-cssmin');  
   */
  //注册任务  
  grunt.registerTask('default', ['babel','concat', 'uglify']);  
}