gulp入门指南与实例

因最近开发几个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']);
});*/

四.打包前后对比

生产环境共引入以下文件






1.css处理:

less文件:
less文件大小

编译成css:271KB+ionic.min.css 195KB,共466KB
less编译成css文件大小

压缩合并后:共291KB,压缩38%;
合并压缩后的css

2.业务代码js源文件:
业务js文件

编译压缩合并后:压缩37%
业务js文件经gulp处理后

3.第三方库文件:
第三方库文件大小

合并压缩后:压缩32%
第三方库合并压缩后

4.图片压缩:21%;
图片压缩后

打包前后文件夹大小对比:
打包前后文件夹对比

你可能感兴趣的:(gulp入门指南与实例)