gulp入门指南与实例

2017-12-07 本文已影响85人 BirdNiao

因最近开发几个ionic1项目,默认配置的gulp,对gulp已经非常熟悉,用实例来写一点教程,如有错误欢迎指正。

gulp作为自动化构建工具，虽然与webpack是属于两种不同类的工具，原理不同（webpack是模块化方案工具，gulp是自动化代替手工操作的工具），但都可以用来处理文件的编译压缩打包等工作，单纯从使用上来说，gulp配置更加方便快捷，代码更加简单易上手。

本项目中gulp执行顺序:

1.清除www项目

2.html压缩

3.复制图标文件

4.Js:ES6编译=>删除console(alert,debug)=>压缩=>合并=>混淆

5.合并压缩第三方库

6.图片:压缩

7.css:less编译=>合并=>删除重复样式=>添加MD5后缀

一.安装gulp

1.全局安装gulp

可先安装cnpm,用cnpm替代npm,安装速度快

npm install -g gulp

2.项目中安装gulp,写进项目package.json的依赖中

npm install --save-dev gulp

二.gulp主要API

1.gulp.task()定义任务

gulp.task(name,[deps, deps], fn)

name 为任务名,
deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数.
fn 为任务函数，我们把任务要执行的代码都写在里面。该参数也是可选的。

2.gulp.src()找你需要操作的文件

3.gulp.dest()要生成的文件的位置

4.gulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务

gulp.watch(同gulp.src()类似的文件路径, tasks)

tasks为gulp.task()中定义的任务名，为数组

5.pipe()

用于传递文件.

三.整个项目的实例如下

在gulpfile.js文件中修改

var gulp = require('gulp'),
  cleanCss = require('gulp-clean-css'),         //压缩清理css
  rename = require('gulp-rename'),              //重命名,项目中没有用到
  babel = require('gulp-babel'),                //编译ES6
  plumber = require('gulp-plumber'),            //捕获处理任务中的错误
  minifyHtml = require('gulp-minify-html'),     //压缩html
  less = require('gulp-less'),                  //获取gulp-less模块
  uglify = require('gulp-uglify'),              //js文件压缩混淆
  concat = require('gulp-concat'),              //合并文件
  imagemin = require('gulp-imagemin'),          //图片压缩
  clean = require('gulp-clean'),                //删除项目
  rev = require('gulp-rev'),                    //- 对文件名加MD5后缀
  revCollector = require('gulp-rev-collector'), //- 路径替换
  gulpSequence = require('gulp-sequence'),      //同步执行
  stripDebug = require('gulp-strip-debug');     //删除console,alert等

  var paths = {
  es6: ['./src/**/*.js', '!./src/common/lib/*.js'],
  vendor: ['./src/common/lib/*.js', '!./src/common/lib/ionic.bundle.js', '!./src/common/lib/less.min.js'],
  less: ['./src/**/*.less'],
  css: ['./src/common/lib/ionic.min.css', './rev/style.min.css'],
  html: ['./src/**/*.html'],
  img: ['./src/**/*.png', './src/**/*.jpg', './src/**/*.gif', ],
  copyFonts: ['./src/common/css/fonts/*'],
};

//发布生产环境用 gulp
gulp.task('default', gulpSequence('clean', 'minify-html', 'copyFonts',
  'babel', 'concatVendor', 'minify-img', 'revCss2'));

//平常只需更新html、css、js,用gulp test
gulp.task('test', gulpSequence('minify-html',
  'babel', 'revCss2'));

// 1.清空
gulp.task('clean', function() {
  return gulp.src(['./www'])
    .pipe(clean());
});

//2.压缩html
gulp.task('minify-html', function() {
  gulp.src(paths.html) // 要压缩的html文件
    .pipe(minifyHtml()) //压缩
    .pipe(gulp.dest('./www'));
});

// 3.复制图标文件
gulp.task('copyFonts', function() {
  return gulp.src(paths.copyFonts)
    .pipe(gulp.dest('./www/css/fonts'));
});

//4.Js:ES6编译=>删除console(alert,debug)=>压缩=>合并=>混淆
gulp.task('babel', function() {
  return gulp.src(paths.es6)
    .pipe(plumber())
    .pipe(babel({ presets: ['env'] }))
    .pipe(stripDebug())
    .pipe(uglify())
    .pipe(concat('build.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./www'));
});

//5.合并压缩第三方库
gulp.task('concatVendor', function() {
  return gulp.src(paths.vendor)
    .pipe(concat('vendor.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./www'));
});

//6.图片:压缩
gulp.task('minify-img', function() {
  gulp.src(paths.img)
    .pipe(imagemin())
    .pipe(gulp.dest('./www'));
});

//7.css:less编译=>合并=>删除重复样式=>添加MD5后缀
gulp.task('less', function() {
  return gulp.src(paths.less)
    .pipe(less())
    .pipe(concat('style.min.css'))
    .pipe(cleanCss({
      level: 2  //level2可合并去重,https://github.com/jakubpawlowicz/clean-css#how-to-use-clean-css-api
    }))
    .pipe(gulp.dest('./rev'));
});

gulp.task('concatCss', ['less'], function() {
  return gulp.src(paths.css)
    .pipe(concat('style.min.css'))
    .pipe(rev())
    .pipe(gulp.dest('./www/css'))
    .pipe(rev.manifest('rev-css2-manifest.json')) //- 生成一个rev-manifest.json
    .pipe(gulp.dest('./rev'));
});

gulp.task('revCss2', ['concatCss'], function() {
  gulp.src(['./rev/rev-css2-manifest.json', './www/*.html']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
    .pipe(revCollector({ replaceReved: true })) //- 执行文件内css名的替换
    .pipe(gulp.dest('./www')); //- 替换后的文件输出的目录
});


//自动编译,不喜欢自动编译,关掉了
// gulp.watch(paths.es6, ['babel']);
// gulp.watch(paths.less, ['less']);
/*gulp.task('watch', ['babel','less'], function() {
  // gulp.watch(paths.sass, ['sass']);
  gulp.watch(paths.es6, ['babel']);
  gulp.watch(paths.less, ['less']);
});*/

四.打包前后对比

生产环境共引入以下文件

<!-- 生产环境 -->
<link rel="stylesheet" type="text/css" href="css/style.min.css">
<script src="vendor.min.js"></script>
<script src="build.min.js"></script>
<script src="cordova.js"></script>