运用gulp 举行ES6开辟

一说起ES6,总会顺带看到webpack、babel、browserify另有一些认都不熟悉的blabla名词,关于gulp才会一点点的我来讲,心田简直是崩溃的,上网查了一些文章,探究着用gulp搭起一个ES6的开辟形式,总之先一边学ES6一边写吧。。然后再让这个流程越发。。高等。

最先

《运用gulp 举行ES6开辟》

ES6有许多新特征让人不由得想去尝试,然则种种浏览器的支撑水平还不足以让我们直接在浏览器上实行ES6的代码,幸亏babel能够协助我们将ES6代码转码成ES5,再利用bowserify的协助,我们就能够恣意体验ES6带来的愉悦了。P.S. 构建东西运用的是gulp。

目标

制订一个流程之前照样先得想好我们想让这个流程是一个什么模样。

起首,开辟代码和布置代码是离开的,比方我们在/app目录下开辟,然后经由过程gulp构建以后,代码将存放在 /dist 目录下。也就是说翻开 /dist 目录下的文件,是能够直接在浏览器上运转的。

那末我们能够商定这个流程以下:

1. 开辟

在app目录下开辟,这时候 /js 目录下是ES6的代码。

/app
-- /js
---- app.js
---- util.js
-- /css
---- base.css
---- app.css
/dist
-- /js
-- /css
-- index.html
gulpfile.js
package.json

2. 构建

运用gulp将js转码成ES5并紧缩,将css兼并并紧缩。

/app
-- /js
---- app.js
---- util.js
-- /css
---- base.css
---- app.css
/dist
-- /js
---- app.js // 已转码成了ES5
---- util.js // 已转码成了ES5
-- /css
---- all.min.css // base.css + app.css 兼并、紧缩并重定名的文件
-- index.html
gulpfile.js
package.json

3. 运用 bowserify

假如我们运用了ES6中的 module,经由过程 importexport 举行模块化开辟,那末经由过程babel转码后, importexport 将被转码成相符CMD范例的 requireexports 等,然则浏览器照样不熟悉,这时候能够运用 bowserify 对代码再次举行构建。发生文件为 bundle.js

/app
-- /js
---- app.js
---- util.js
-- /css
---- base.css
---- app.css
/dist
-- /js
---- app.js // 已转码成了ES5
---- util.js // 已转码成了ES5
---- bundle.js // 现实援用的js文件
-- /css
---- all.min.css // base.css + app.css 兼并、紧缩并重定名的文件
-- index.html
gulpfile.js
package.json

所以一最先 index.html 中援用的js文件和css文件就是 bundle.jsall.min.css

确定好流程后,就最先搭建开辟环境吧。

一、新建项目

项目构造以下:

/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

如今就最先ES6开辟之旅吧

    原文作者:时间被海绵吃了
    原文地址: https://segmentfault.com/a/1190000004394726
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞