gulp入門教學

首先第一步 安裝gulp node

壓縮js文件

再去安裝 gulp-uglify
  建立gulpfile.js
  建立壓縮後放文件的位置(a)
  建立須要壓縮的文件位置(b)
  進入gulpfile.js 編輯代碼
  var gulp = require('gulp')
  <!-- 壓縮文件的插件引入一下 -->
  var uglify = require('gulp-uglify')
  gulp.task('script',function(){
  gulp
      .src(「壓縮文件的位置（b）「
      .pipe(uglify())
      .pipe(gulp.dest("目標位置")
  })

#壓縮CSS文件

安裝gulp-minify-css
引用
 var gulp = require(gulp)
var minifycss= require(gulp-minify-css)
gulp.task('css',function(){
   gulp
        .src('css初始文件的位置')  
        .pipe(minifycss());
        <!-- 保存位置 -->
        .pipe(gulp.dest(css新的文件儲存位置))
  })

#壓縮images文件

安裝 gulp-imagemin
      引用
      var gulp = require(gulp)
      var imagemin = require('gulp-imagemin')
      gulp.task('images',function(){
         gulp
              .src('images初始文件的位置')  
              .pipe(imagemin({
                progressive:true
                }))
              <!-- 保存位置 -->
              .pipe(gulp.dest(圖片儲存席位置))
        })

#less 壓縮和CSS同理 只是插件方法不同

安裝gulp-less
var gulp=require(gulp)
var less= require(gulp-less)
gulp.task('css',function(){
   gulp
        .src('css初始文件的位置')  
        .pipe(less())
        <!-- 保存位置 -->
        .pipe(gulp.dest(css新的文件儲存位置))
  })

#建立一個自動檢測文件修改而且輸入gulp 能夠自動運行項目的壓縮；

<!-- 適配ES6的方法 -->
安裝一個

npm i -D gulp-babel
npm i -D babel-core
npm i -D babel-preset-env
vim .babelrc

文件根目錄下面建立一個.babelrc 文件裏面存儲一個
{
  "presets":["env"]
}

<!-- 監聽文件修改，掛在後臺 -->

gulp.task('auto',function(){
    gulp.watch('初始文件的位置路徑',['須要執行的方法(script)'])
    gulp.watch('初始文件的位置路徑',['須要執行的方法(css)'])
    gulp.watch('初始文件的位置路徑',['須要執行的方法(images)'])
  })
  <!-- 建立默認方法  -->
gulp.task('default',['script','images'],['css'])