使用gulp 進行ES6開發

使用gulp 進行ES6開發

1、新建項目

項目結構以下：

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

咱們的代碼在 /app 目錄下開發，轉碼、合併、壓縮完以後保存在 /dist 下。

2、配置環境

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，讓咱們的工做更有效率。

3、配置 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