使用gulp 进行ES6开发
2024-08-31 09:37:02
使用gulp 进行ES6开发
一、新建项目
项目结构如下:
/app
-- /js
-- /css
/dist
-- /js
-- /css
-- index.html
gulpfile.js
我们的代码在 /app
目录下开发,转码、合并、压缩完之后保存在 /dist
下。
二、配置环境
1) 初始化 npm
首先进入根目录,初始化项目
$ npm init
2) 安装 gulp
$ npm install gulp --save-dev
3) 安装 gulp-babel
Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
命令:
npm install --save-dev gulp-babel babel-preset-es2015
其中babel -preset-es2015 是ES2015转码规则,如果代码中含有es7的内容,可以继续安装ES7不同阶段语法提案的转码规则
(摘自阮一峰老师的ECMAScript 6入门)
# ES2015转码规则
$ npm install --save-dev babel-preset-es2015
# react转码规则
$ npm install --save-dev babel-preset-react
# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
4) 安装其他gulp工具
以下是根据流程所需要安装的全部工具
$ 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
最新文章
- JS获取剪贴板图片之后的格式选择与压缩问题
- Python第一天 - 迭代
- 初学者-ASCII码 数字转字母
- UINavigationController push时,页面卡顿
- 对.Net系统架构改造的一点经验和教训
- docker container link
- HTML5-canvas实例:刮刮乐游戏
- 建房子之前先挖地基 - Java BlockingQueue理解
- elike.python.function()
- jQuery 文档操作方法 (四)
- H5+Ajax+WebApi实现文件下载(进度条,多文件)
- <;%=pageCount %>;
- c#结构体、打他table、excel、csv互转
- Android存储之SharedPreferences
- YOLO V3 错误总结
- [No0000FF]鸡蛋煮熟了蛋黄为什么发黑?
- 雷林鹏分享:jQuery EasyUI 窗口 - 自定义带有工具条和按钮的对话框
- 如何在Google Play商店发布多个版本apk
- jsp页面获取参数的方法(url解析、el表达式赋值、session取值)【原创】
- 疑难en_a