gulp配置es6转es5

xiaoxiao2021-02-28  12

一、新建项目

项目结构如下:

/app -- /js -- /css /dist -- /js -- /css -- index.html gulpfile.js

我们的代码在 /app 目录下开发,转码、合并、压缩完之后保存在 /dist 下。

二、配置环境

(1) 初始化 npm

首先进入根目录,初始化项目

npm init

(2) 安装 gulp及其依赖

//安装gulp npm install gulp --save-dev //安装ES6转码器,ES6代码转为ES5代码 npm install gulp-babel babel-preset-es2015 babel-core --save-dev //其他工具 npm install gulp-rename gulp-concat gulp-uglify gulp-cssnano browserify vinyl-source-stream --save-dev

gulp-rename 重命名文件 gulp-concat 合并文件 gulp-uglify 压缩js文件 gulp-cssnano 压缩css文件 browserify 让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码 vinyl-source-stream 将Browserify的bundle()的输出转换为Gulp可用的vinyl(一种虚拟文件格式)流

至此环境已经搭建好了。接下来我们需要配置gulp,让我们的工作更有效率。

三、配置 gulp

在根目录创建gulpfile.js进行配置

const gulp = require('gulp'); const babel = require('gulp-babel'); const uglify = require('gulp-uglify'); const rename = require('gulp-rename'); const cssnano = require('gulp-cssnano'); const concat = require('gulp-concat'); const browserify = require('browserify'); const source = require('vinyl-source-stream'); // 编译并压缩js gulp.task('convertJS', function(){ return gulp.src('app/js/*.js') .pipe(babel({ presets: ['es2015'] })) .pipe(uglify()) .pipe(gulp.dest('dist/js')) }) // 合并并压缩css gulp.task('convertCSS', function(){ return gulp.src('app/css/*.css') .pipe(concat('app.css')) .pipe(cssnano()) .pipe(rename(function(path){ path.basename += '.min'; })) .pipe(gulp.dest('dist/css')); }) // 监视文件变化,自动执行任务 gulp.task('watch', function(){ gulp.watch('app/css/*.css', ['convertCSS']); gulp.watch('app/js/*.js', ['convertJS', 'browserify']); }) // browserify gulp.task("browserify", function () { var b = browserify({ entries: "dist/js/app.js" }); return b.bundle() .pipe(source("bundle.js")) .pipe(gulp.dest("dist/js")); }); gulp.task('start', ['convertJS', 'convertCSS', 'browserify', 'watch']);

通过 watch,我们可以在保存完代码之后,让gulp自动帮我们将代码构建一遍,而不用自己再敲一遍命令。

开始 gulp

gulp start

使用时直接引入bundle.js就可以了

转载请注明原文地址: https://www.6miu.com/read-2000018.html

最新回复(0)