【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())处理