最近这俩天在写个测试项目,使用grunt来进行转义和压缩。
首先需要执行下
cnpm install grunt-babel --save-dev
就是通过es6来写js,通过less来写样式,但发布调用却不能直接调用es6的js和less,而是通过babel-grunt将es6转成es5,通过lessc将less文件转成css,然后再压缩成压缩文件供html界面调用。
grunt的配置文件内容如下
module.exports = function (grunt) {
var sassStyle = 'expanded';
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
babel: {
options: {
sourceMap: false,
presets: ['babel-preset-es2015']
},
dist: {
files: [{
expand: true,
cwd: './goingOA/login/js/', //js目录下
src: ['**/Login.js'], //所有js文件
dest: './dest/' //输出到此目录下
}]
}
},
less:{
page: {
options: {
//配置项
compress: true //CSS 压缩
},
files: {
//目标文件,将 page.less 文件编译压缩后,生成 page.css 文件
'./goingOA/login/css/Login.css' : './goingOA/login/less/Login.less'
}
}
},
concat: {
options: {
separator: '',
stripBanners: true
},
dist: {
src: ['./dest/Login.js'],
dest: './dest/LoginTemp.js'
},
},
uglify: {
compressjs: {
files: {
'./goingOA/login/js/Login.min.js': ['./dest/LoginTemp.js']
}
}
},
jshint: {
all: ['./dest/LoginTemp.js'],
options: {
globals: {
document: false,
window: false
}
}
}
});
grunt.loadNpmTasks('grunt-babel');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('lessDev', ['less']);
grunt.registerTask('default', ['babel']);
grunt.registerTask('outputcss', ['sass']);
grunt.registerTask('concatjs', ['concat']);
grunt.registerTask('compressjs', ['babel', 'concat', 'jshint', 'uglify','less:page']);
grunt.registerTask('default');
};
以为一切ok,执行时,始终在jshint代码检查的地方过不去,错误内容如下:
Running "jshint:all" (jshint) task
./dest/LoginTemp.js
1 |"use strict";
^ Use the function form of "use strict".
13 |var vueObj = new Vue({
^ 'Vue' is not defined.
17 | loginBtnLabel: i18nMap.get("loginBtnLabel"), //登登录录按按钮钮的的label
^ 'i18nMap' is not defined.
18 | findPswLabel: i18nMap.get("findPswLabel"), //找找回回密密码码的的label
^ 'i18nMap' is not defined.
19 | i18nSelLabel: i18nMap.get("i18nSelLabel"), //选选则则语语言言的的label
^ 'i18nMap' is not defined.
20 | loginInfo: i18nMap.get("loginInfo"), //信信息息展展示示的的label
^ 'i18nMap' is not defined.
32 | var curTime = setTimeout(function () {
^ 'setTimeout' is not defined.
打开代码发现就是js头上多了"use strict"造成的。
然后就是到处找度娘,最终才搞定,就是在.babelrc文件中需要添加一个插件。
修改前
{
presets: [
[ "es2015", { "modules": false } ]
],
"plugins": []
}
修改后
{
presets: [
[ "es2015", { "modules": false } ]
],
"plugins": ["transform-remove-strict-mode"]
}
注明了插件当然要安装插件咯
cnpm install babel-plugin-transform-remove-strict-mode
这下就ok了,大功告成。