今天在使用gulp 压缩js时,遇到了这样的错误:
从网上找了找原因,有网友说:
js不知道哪里用到了es6语法,为了解决压缩js报错抱着试一试的心态,步骤如下:
1.全局安装Babel。
npm install -g babel-cli
npm install -g babel-cli --save-dev
2.新建配置文件是.babelrc,放在与build目录同级
3.安装 babel核心包 和 ES2015转码规则
npm install --save-dev babel-core babel-preset-es2015
4.将规则加入到.babelrc文件中
{
"presets": [
"es2015"
],
"plugins": []
}
5. 安装gulp-babel
npm install --save-dev gulp-babel
6.gulp.prod.js中 配置babel
const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const rename = require('gulp-rename');
const mincss = require('gulp-minify-css');
const minhtml = require('gulp-minify-html');
const minimg = require('gulp-imagemin');
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');
// const jshint = require('gulp-jshint');
const livereload = require('gulp-livereload');
const concat = require('gulp-concat');
const config = require('./gulpfile.config');
// 开发环境下
function prod(){
//html
gulp.task('html', function(){
return gulp.src(config.html.src)
.pipe(minhtml())
.pipe(gulp.dest(config.html.dist));
});
//assets
gulp.task('assets',function(){
return gulp.src(config.assets.src)
.pipe(gulp.dest(config.assets.dist));
});
//js
gulp.task('scripts',function(){
return gulp.src(config.js.src)
// .pipe(gulp.dest(config.js.dist))
.pipe(babel())
.pipe(uglify())
.pipe(gulp.dest(config.js.dist))
});
//plugins
gulp.task('plugins',function(){
return gulp.src(config.plugins.src)
.pipe(gulp.dest(config.plugins.dist))
});
//utils,全是js
gulp.task('utils',function(){
return gulp.src(config.utils.src)
// .pipe(gulp.dest(config.utils.dist))
.pipe(babel())
.pipe(uglify())
.pipe(gulp.dest(config.utils.dist));
})
//入口文件,全是HTML
gulp.task('entries',function(){
return gulp.src(config.entries.src)
.pipe(minhtml())
.pipe(gulp.dest(config.entries.dist))
})
//假数据
gulp.task('json',function(){
return gulp.src(config.json.src)
.pipe(gulp.dest(config.json.dist))
})
//
gulp.task('prod',['json','html','scripts','entries','assets','plugins','utils'],function(){
})
}
module.exports = prod
gulp.config.js内容:
const gulp = require('gulp');
const src_dir = './src/'; //源文件目录
const dist_dir = './dist/';//压缩文件目录
const dist_files = dist_dir + '**';// 目标路径下的所有文件
const config = {
src: src_dir,
dist: dist_dir,
dist_files: dist_files,
html: {
src: src_dir + 'pages/**',
dist: dist_dir +'pages',
},
// html: {
// src: src_dir + 'pages/property/construction/**',
// dist: dist_dir +'pages/property/construction',
// },
assets: {
src: src_dir+ 'assets/**',
dist: dist_dir+'assets'
},
js:{
src:src_dir +'js/**',
dist:dist_dir+'js'
},
// js:{
// src:src_dir +'js/property/construction/**',
// dist:dist_dir+'js/property/construction'
// },
indexjs:{
src:src_dir +'js/index/**',
dist:dist_dir+'js/index'
},
img:{
src:src_dir+ 'assets/images/*',
dist: dist_dir+'assets/images/*'
},
utils:{
src:src_dir+ 'utils/**',
dist: dist_dir+'utils'
},
plugins:{
src:src_dir+ 'plugins/**',
dist: dist_dir+'plugins'
},
entries:{
src:src_dir+ '*.html',
dist:dist_dir
},
json:{
src:src_dir+ 'mock-data/*',
dist: dist_dir+'mock-data'
}
};
//
module.exports = config ;