今天在使用gulp 压缩js时,遇到了这样的错误:

gulp压缩js报错,也许你需要用到babel

从网上找了找原因,有网友说:

gulp压缩js报错,也许你需要用到babel

   js不知道哪里用到了es6语法,为了解决压缩js报错抱着试一试的心态,步骤如下:

1.全局安装Babel。
  npm install -g babel-cli  
  npm install -g babel-cli --save-dev  

2.新建配置文件是.babelrc,放在与build目录同级
gulp压缩js报错,也许你需要用到babel

 

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 ;
View Code

相关文章:

  • 2021-05-03
  • 2021-05-25
  • 2022-12-23
  • 2021-07-04
  • 2021-05-05
  • 2022-12-23
  • 2021-07-10
  • 2021-10-25
猜你喜欢
  • 2022-01-11
  • 2021-11-10
  • 2021-06-28
  • 2022-12-23
  • 2022-12-23
  • 2021-04-21
  • 2022-12-23
相关资源
相似解决方案