注:以下安装可能都需要管理员权限
一.安装nodejs
建议安装node版本4.xx之上,最好安装偶数版本,因为后期如果要压缩html和js可能会对版本有要求。
nodejs下载地址:https://nodejs.org/dist/
1.下载自己所需版本的node的压缩包(此处以node-v4.4.6-linux-x64.tar.gz为例),到自己指定目录(以mysoftware为例)下解压
<1>cd /mysoftware(自己的指定目录);
<2>tar xvf node-v4.4.6-linux-x64.tar.gz;
<3>解压后进入到bin目录下确认一下是否存在npm和node文件,如果存在执行下面软连接,如果没有重新解压;
<4>建立软连接,设为全局变量(node的路径可以使用pwd获得)
<4.1>ln -s /home/mysoftware/node-v4.4.6-linux-x64/bin/node /usr/local/bin/node
<4.2>ln -s /home/mysoftware/node-v4.4.6-linux-x64/bin/npm /usr/local/bin/npm
<5>输入node -v 命令检查是否成功,出现正常版本号证明安装成功。
二.安装grunt(参考上篇博客)
1.管理员权限下输入命令: npm install -g grunt
2.安装成功后输入:grunt -version 检查版本看是否成功
三.使用grunt压缩使用es6语法的项目,需要先将es6转义再压缩,否则会报错,下面附上测试用例以及Gruntfile配置。
<1>Gruntfile文件配置如下:
module.exports = function(grunt) { //配置参数 grunt.initConfig({ // pkg: grunt.file.readJSON('package.json'), watch: { js: { files:['origin_js/**/*.js'], tasks:['default'], options: {livereload:false} }, babel:{ files:'origin_js/**/*.js', tasks:['babel'] } }, babel: { options: { sourceMap: false, presets: ['env'] }, dist: { files: [{ expand:true, cwd:'origin_js/', //origin_js目录下 src:['**/*.js'], //所有js文件 dest:'babel/' //输出到此目录下 }] } }, uglify: { options: { mangle: true, //混淆变量名 comments: 'false' //false(删除全部注释),some(保留@preserve @license @cc_on等注释) }, my_target: { files: [{ expand:true, cwd:'babel/', //js目录下 src:['**/*.js'], //所有js文件 dest:'js/' //输出到此目录下 }] } }, htmlmin:{ options:{ removeComments:false, collapseWhitespace:true }, my_target:{ files:[{ expand:true, cwd:'origin_js', src:'**/*.html', dest:'js/' }] } } }); //载入uglify插件,压缩js grunt.loadNpmTasks('grunt-babel'); //grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-htmlmin'); //注册任务 grunt.registerTask('default', ['babel','uglify','htmlmin']); // grunt.registerTask('watcher',['watch']); }
<2>package.json文件所需插件如下:其中下载安装babel参考官网:https://www.npmjs.com/package/grunt-babel
{ "name": "appstore", "version": "1.0.0", "devDependencies": { "babel-core":"^6.26.0", "babel-preset-env":"^1.6.1", "grunt": "^1.0.2", "grunt-babel": "^7.0.0", "grunt-contrib-htmlmin": "^2.4.0", "grunt-contrib-uglify": "^3.3.0" } }
三.效果如下:babel文件夹下是将源文件夹origin_js的代码转换为es5之后的代码,js文件夹下是压缩的babel文件夹下的最终文件