1.grunt是基于node,node需要>=0.8.0的稳定版本(奇数是开发版,偶数是稳定版)
2.安装grunt脚手架 (mac电脑需要权限 在前面加上 sudo)
npm install -g grunt-cli
验证grunt-cli是否安装成功
这样的情况表示安装成功了!
3.在根目录下创建Gruntfile.js 文件,文件内容如下
module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { options: { separator: ';' }, dist: { src: ['src/**/*.js'], dest: 'dist/<%= pkg.name %>.js' } }, uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n' }, buildall: { options: { mangle: true, compress: { drop_console: true }, report: "min" //输出压缩率,可选值有false(不输出) }, files: [{ expand: true, cwd: 'src', //js目录下 src: '**/*.js', //所有js文件 ext: '.min.js', //压缩后的文件后缀名称 dest: 'dist' //输出到此目录下 }] } // dist: { // files: { // 'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>'] // } // } }, qunit: { files: ['test/**/*.html'] }, jshint: { files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'], options: { //这里是覆盖JSHint默认配置的选项 globals: { jQuery: true, console: true, module: true, document: true } } }, watch: { // files: ['<%= jshint.files %>'], // tasks: ['jshint', 'qunit'] scripts: { files: ['src/**/*.js'], tasks: ['minall'], options: { spawn: true, interrupt: true } } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); // grunt.loadNpmTasks('grunt-contrib-jshint'); // grunt.loadNpmTasks('grunt-contrib-qunit'); // grunt.loadNpmTasks('grunt-contrib-watch'); // grunt.loadNpmTasks('grunt-contrib-concat'); grunt.registerTask('minall', ['uglify:buildall']); grunt.registerTask('default', ['jshint', 'qunit', 'uglify', 'concat']); };
4.安装依赖
通过npm init创建package.json文件(有了就忽略),并写入json文件(按照顺序安装)
npm install grunt --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-qunit --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-watch --save-dev
5.运行grunt uglify
-------------------------假装是个分割线----------------
我以为到这里就是已经结束了,然而 并不是,uglify默认的配置貌似不支持ES7的async语法,
所以吧。。。又用了bebel转了一次,感觉很麻烦,
1.安装babel-cli
npm install --save-dev babel-cli
2.presets 字段设定转码规则
npm install babel-preset-env --save-dev
npm install --save-dev babel-plugin-transform-runtime //对于es7 async的支持,否则会报错ReferenceError: regeneratorRuntime is not defined".
3.创建.bebalrec文件
{ "presets": ["env"], "plugins": [[ "transform-runtime", { "helpers": false, "polyfill": false, "regenerator": true, "moduleName": "babel-runtime" } ]]
}
4.package.json 中添加
"scripts": { "build": "babel src -d dist" //src现在资源目录 。dist转换后的目录 },
5.npm run build