gulp入門---js等文件的壓縮以及將es6代碼轉成es5

最開始，固然要先安裝node和npm，而後新建本身的項目（ps：項目名不能是‘gulp’），
而後初始化一下：
npm init -y
生成packge.json

---

首先咱們來看一下項目的目錄結構：

如圖：
目錄css、images、js都是你項目本來的文件目錄
而dist目錄以及目錄下的css、images、js目錄就是將文件壓縮後存放到的相應目標目錄
接下來，就能夠進入正題了

---

安裝gulp

在你的項目目錄下打開命令行界面
首先要全局安裝一下gulp，輸入：
npm i -g gulp
而後，要把gulp安裝到本地：
npm i -D gulp

---

編寫gulpfile.js文件

首先在項目目錄下新建一個gulpfile.js文件：

導包

引入所須要的包：

var gulp = require('gulp');
var uglify = require('gulp-uglify');   ////用於壓縮js文件
var minifyCSS = require('gulp-minify-css');   ////用於壓縮css文件
var imagemin = require('gulp-imagemin');   ////用於壓縮image文件

gulp-uglify、gulp-minify-css、gulp-imagemin須要在本地安裝一下，
同理在項目目錄下打開命令行界面，輸入相應命令：
npm i -D gulp-uglify
npm i -D gulp-minify-css
npm i -D gulp-imagemin
安裝成功後，繼續在gulpfile.js中寫代碼：

新建壓縮任務

/////新建一個‘script’任務   /////用於壓縮js文件
gulp.task('script',function(){
    /////找到須要壓縮的文件
    gulp.src('js/**/*.js')   ////  /**/  表示js目錄下的任意層級的目錄
    /////壓縮文件
    .pipe(uglify())
    /////另存壓縮後文件
    .pipe(gulp.dest('dist/js'));
});

同理，也能夠新建壓縮css、images文件的任務：

gulp.task('css',function(){
    gulp.src('css/**/*.css')
    .pipe(minifyCSS())
    .pipe(gulp.dest('dist/css'));
});

gulp.task('images',function(){
    gulp.src('images/**/*.*')
    .pipe(imagemin({progressive:true}))
    .pipe(gulp.dest('dist/images'));
});

---

到此，壓縮的任務就完成了，在命令行界面能夠輸入 ‘gulp’ 空格 任務名稱 來執行壓縮，例如：
gulp script
執行完成後，在dist目錄的相應目錄下能夠找到壓縮後的文件

自動壓縮任務

在默認狀況下，咱們每次修改文件都要去執行壓縮任務才能獲得壓縮後的文件，
爲了方便，咱們使用watch方法來新建一個監放任務，每次修改文件，系統會自動執行壓縮：

gulp.task('auto',function(){
    ////////監聽文件，當文件被修改後自動執行壓縮任務
    ////////第一個參數：監聽的目標文件
    ///////第二個參數：監聽到修改後執行的壓縮任務
    gulp.watch('js/**/*.js',['script']);  
    gulp.watch('css/**/*.css',['css']);
    gulp.watch('images/**/*.*',['images']);
});

默認任務

/////////定義默認任務,使用gulp 啓動數組裏的全部任務
gulp.task('default',['images','css','script','auto']);

新建默認任務後，在命令行執行：
gulp
便可執行全部數組中的任務

---

將es6代碼轉成es5

在以上的代碼基礎上，繼續寫入代碼：
首先，仍是要導包

var babel = require('gulp-babel');

同理，在本地安裝：
npm i -D gulp-babel
除此以外，還要裝一個包：
npm i -D babel-preset-env

裝完以後，在項目根目錄下新建一個 .babelrc 文件
在文件內輸入：

{
  "presets": ["env"]
}

完成以後，只要在js文件壓縮任務中加入.pipe(babel())就能夠成功轉代碼了，以下：

gulp.task('script',function(){
    /////找到文件
    gulp.src('js/**/*.js')
    //////把ES6代碼轉成ES5代碼
    .pipe(babel())
    /////壓縮文件
    .pipe(uglify())
    /////另存壓縮後文件
    .pipe(gulp.dest('dist/js'));
});