今天在使用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 ;
.babelrc内容
{
"presets": [
"es2015"
],
"plugins": []
}
package.json内容
{
"name": "gspark-webclient",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "gulp dev",
"clean": "rimraf dist",
"build": "gulp prod"
},
"repository": {
"type": "git",
"url": "http://192.168.66.75/gspark/gspark-webclient.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"as": "^0.4.1",
"babel-core": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.0.0",
"gulp-babel": "^7.0.0",
"gulp-clean-css": "^3.9.0",
"gulp-concat": "^2.6.1",
"gulp-imagemin": "^3.4.0",
"gulp-jshint": "^2.0.4",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.5.0",
"gulp-minify-css": "^1.2.4",
"gulp-minify-html": "^1.0.6",
"gulp-uglify": "^3.0.0",
"http-proxy-middleware": "^0.17.4",
"root": "^3.1.0"
},
"dependencies": {
"browser-sync": "^2.18.13"
}
}
执行 npm run build
顺利执行了,哒哒~
此文章为转载文章,原创作者看到可以联系我加上链接