【gulp】快速应用指南

快速上手

一、准备目录结构

新建项目compressjs，项目中有js、css、images文件夹,

然后运行  

   npm init -y

新建dist文件夹，存放压缩文件

新建gulpfile.js文件

结构图示：

二、使用步骤

1、全局安装：

   npm i -g gulp

2、编辑 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压缩模块
    

压缩操作

//1、压缩js
gulp.task('script',function(){  //启动任务script
  gulp.src('js/*.js')           //找到文件
  .pipe(uglify())               //压缩文件
  .pipe(gulp.dest('dist/js'))   //另存压缩文件
});

//2、压缩css
gulp.task('css',function(){     //启动任务css
  gulp.src('css/*.css')         //找到文件
  .pipe(minifyCSS())            //压缩文件
  .pipe(gulp.dest('dist/css'))  //另存压缩文件
});

//3、压缩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']);
  //默认任务，按数组依次执行

3、命令行运行 gulp；

4、补充：兼容ES6语法文件

1、安装npm i -D babel-preset-env 和 npm i -D gulp-babel
2、引用var babel = require('gulp-babel')
3、新建文件 touch .babelrc
4、编辑文件.babelrc {"presets":["env"]}
5、用法，压缩前使用管道.pipe(babel())处理