gulp使用方法详解

1.gulp的基本介绍

Gulp.js是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js是基于Node.js构建的，利用Node.js流的威力，你可以快速构建项目并减少频繁的IO操作。Gulp.js源文件和你用来定义任务的Gulp文件都是通过JavaScript源码来实现的

2.gulp的安装

1. gulp使用基于node环境，安装使用gulp前需要安装node（node的安装和使用详见day33的内容）
2. npm(cnpm) i gulp-cli -g 命令全局安装gulp-cli，gulp的命令行工具
3. 新建一个项目文件夹并进入，npm init 命令初始化当前项目文件夹包管理文件，系统会自动生成package.json文件
4. npm(cnpm) i gulp@3 --save-dev(-D) 命令当前项目文件夹下安装gulp
5. 项目文件夹根目录下创建gulpfile.js文件
6. 根目录下起命令 gulp 跑起默认task

3.gulp的常用方法

gulp.task

定义一个使用 Orchestrator 实现的任务（task）

gulp.src

输出（Emits）符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。 将返回一个 Vinyl files 的 stream 它可以被 piped 到别的插件中

gulp.dest

能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它

gulp.watch

监听文件或者文件夹的变化，并执行任务

4.gulp的常见任务

编译sass

const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const cleancss = require('gulp-clean-css');
const rename = require("gulp-rename");
const sass = require('gulp-sass');

gulp.task('sass', () => {
return gulp.src(['src/sass/*.scss', 'src/sass/*.sass'])
  .pipe(sass())          // 通过sass插件将sass编译为css，如果需要编译less，则改用less插件
  .pipe(autoprefixer({//自动补全css3前缀
    cascade: false   
  }))
  .pipe(gulp.dest('./dist/css'))
  .pipe(cleancss())  //压缩css
  .pipe(rename({   //重命名
    suffix: '.min'
  }))
  .pipe(gulp.dest('./dist/css'));
})

操作js

const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

gulp.task('js', () => {
  return gulp.src('src/js/*.js')
  .pipe(babel({             // 通过babel插件将ES6转成ES5
    presets: ['env']
  }))
  .pipe(gulp.dest('./dist/js'))
  .pipe(uglify())           // 丑化js代码
  .pipe(rename({            // 重命名
    suffix: '.min'          // 添加后缀
  }))
  .pipe(gulp.dest('./dist/js'))
})

压缩图片

gulp.task('image', () => {
  return gulp.src('./src/images/*')
    .pipe(imagemin([
      imagemin.gifsicle({
        interlaced: true
      }),
      imagemin.jpegtran({
        progressive: true
      }),
      imagemin.optipng({
        optimizationLevel: 5
      }),
      imagemin.svgo({
        plugins: [{
          removeViewBox: true
        },
        {
          cleanupIDs: false
        }
        ]
      })
    ], {
      verbose: true
    }))
    .pipe(gulp.dest('./dist/src/images'));
})

复制文件

gulp.task('copy', () => {
  return gulp.src('./index.html')
    .pipe(gulp.dest('./dist'))
})

合并文件

gulp.task('default',function(){
    gulp.src("./gulp/**/*.js")
    .pipe(concat("main.js"))//合并
    .pipe(uglify())//压缩
    .pipe(rename("main.min.js"))//重命名
    .pipe(gulp.dest("./dist/"))
})