【gulp】快速應用指南

快速上手

1、準備目錄結構

新建項目compressjs，項目中有js、css、images文件夾,

而後運行

npm init -y

新建dist文件夾，存放壓縮文件

新建gulpfile.js文件

結構圖示：

2、使用步驟

一、全局安裝：

npm i -g gulp

二、編輯 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壓縮模塊

壓縮操做

//一、壓縮js
gulp.task('script',function(){  //啓動任務script
  gulp.src('js/*.js')           //找到文件
  .pipe(uglify())               //壓縮文件
  .pipe(gulp.dest('dist/js'))   //另存壓縮文件
});

//二、壓縮css
gulp.task('css',function(){     //啓動任務css
  gulp.src('css/*.css')         //找到文件
  .pipe(minifyCSS())            //壓縮文件
  .pipe(gulp.dest('dist/css'))  //另存壓縮文件
});

//三、壓縮image
gulp.task('images',function(){  //啓動任務image
  gulp.src('images/*.*')        //找到文件
  .pipe(imagemin({              //壓縮文件
    progressive:true
}))             
  .pipe(gulp.dest('dist/images'))       //另存壓縮文件
});

監放任務

gulp.task('auto',function () {
  gulp.watch('js/*.js',['script']);     //監聽script任務
  gulp.watch('css/*.css',['css']);      //監聽css任務
  gulp.watch('images/*.*',['images']);  //監聽images任務
})；

默認任務

gulp.task('default',['script','css','images','auto']);
  //默認任務，按數組依次執行

三、命令行運行 gulp；

四、補充：兼容ES6語法文件

一、安裝npm i -D babel-preset-env 和 npm i -D gulp-babel
二、引用var babel = require('gulp-babel')
三、新建文件 touch .babelrc
四、編輯文件.babelrc {"presets":["env"]}
五、用法，壓縮前使用管道.pipe(babel())處理