使用gulp實現最基礎的js/css壓縮、ES6轉ES5功能

前提

請先安裝node和babel，並準備一個普通的web項目

全局安裝gulp3.9.0

4.x不兼容3.x，平時使用建議直接安裝3.9
npm install -g gulp@3.9.0

檢查版本

gulp -v

在項目目錄下安裝gulp

npm install gulp@3.9.0 --save-dev

安裝插件

壓縮js
npm install gulp-uglify --save-dev

壓縮css
npm install gulp-clean-css --save-dev

重命名
npm install gulp-rename --save-dev

es6 to es5
注意此處要根據狀況替換，根據gulp-babel文檔，若是你的babel --version是6.x，請以下所示安裝gulp-babel@7
npm install gulp-babel@7 babel-core babel-preset-es2015 --save-dev
若是babel版本是7.x，請運行：
npm install gulp-babel @babel/core @babel-preset-es2015 --save-dev

在根目錄建立.babelrc文件

{
  "presets": ["es2015"]
}

在根目錄建立gulpfile.js，根據註釋配置路徑

//配置
var gulp = require('gulp');
var uglify = require('gulp-uglify'); //js
var cleanCSS = require('gulp-clean-css'); //css
var rename = require("gulp-rename"); //重命名
var babel = require("gulp-babel"); //ES6轉ES5

gulp.task('default', ['auto']);

gulp.task('jscompress', function() {
   return gulp.src('dist/*.js') //轉es5以後的js目錄
        .pipe(rename({suffix: '.min'})) //重命名配置
        .pipe(uglify())
        .pipe(gulp.dest('dist/js')); //輸出的文件夾
});

gulp.task('csscompress', function() {
  return  gulp.src('css/*.css') //css文件地址
        .pipe(rename({suffix: '.min'}))
        .pipe(cleanCSS())
        .pipe(gulp.dest('dist/css'));
});

// ES6轉化爲ES5
gulp.task("es62es5", function () {
  return gulp.src("js/*.js") //es6文件地址
    .pipe(babel())
    .pipe(gulp.dest("dist"));
});

// 在命令行使用 gulp auto 啓動監聽
gulp.task('auto', function () {
    // 監聽文件修改，當文件被修改則執行
    gulp.watch('dist/*.js', ['es62es5']);
    gulp.watch('js/*.js', ['jscompress']);
    gulp.watch('css/*.css', ['csscompress']);
});

命令行執行

gulp csscompress //僅壓縮css
gulp jscompress //僅壓縮js
gulp es62es5 //僅將es6轉爲es5
gulp //實時監聽修改，並執行上面三個命令

答疑

全局安裝和本地安裝的區別

本地安裝會生成一個依賴文件夾和package文件，項目若是在服務器上最好仍是本地安裝，下載項目的人能夠一鍵npm install
僅在本地調試的話能夠只全局安裝。
一開始個人項目是在c盤，執行本地安裝命令後沒有生成node_modules文件夾，但模塊卻能夠require到。經查閱後總結以下：

• require命令的規則是自內而外，若是在當前目錄下沒有找到須要的依賴包會到父級目錄下繼續找，直到找到當前盤符根目錄，還未找到則報錯
• 而npm全局安裝的模塊默認是安裝在C:UsersAdministratorAppDataRoamingnpm，c盤項目即便沒有本地安裝依賴仍然能夠require到模塊

這樣就能夠解釋爲何個人C盤項目沒安裝上本地依賴卻能夠require到模塊，以及我猜想項目之因此生成不了node_modules文件是由於npm的一些規則，建議將項目放在其餘盤符中，規避這個問題。

--save-dev和--save的區別

--save-dev安裝的是開發階段要使用的本地依賴
--save安裝的是發佈版本也能用的本地依賴
此處咱們使用的是壓縮代碼的gulp，項目發佈用不到，因此使用--save-dev

gulp-babel所須要的各個依賴分別是什麼意思

逐一解釋：

• babel-core
  若是須要調用Babel的API則必裝
• babel-preset-es2015
  轉換使用的預設規則，將es6轉爲es5，不少人喜歡用babel-preset-env，關於二者的區別請自行查閱，記住修改規則的同時也要修改.babelrc的配置

相關文檔

超詳細的Node中require第三方包規則
npm --save-dev --save 的區別
npm官網文檔
babel官網文檔
gulp 中文文檔

總結

這只是最基礎的壓縮配置，能夠無腦配，但建議配置使用完畢後再看看文檔深刻了解，畢竟實際使用中還有less轉換等其它需求。