gulp编译文件基本操作集囊

一、简介

        gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不尽能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不尽可以很愉快的编写代码,而且大大提高我们的工作效率。

        gulp是基于node.js的自动任务运行器,她能自动化地完成JavaScript/coffee/sass/less/html/image/css等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成。并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了lunix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上十分简单。通过本文,我们将学习如何使用gulp来改变开发流程,从而使开发更加快速高效。

    gulp和grunt非常类似,但相比于grunt的频繁IO操作,gulp的流操作,能更快更便捷的完成项目构建工作。

二、安装以及运行

这里不做介绍,请参考以下链接:

gulp中文文档:https://www.gulpjs.com.cn/docs/getting-started/

gulp详细教程:http://www.ydcss.com/archives/18#lesson2

三、gulp主要参数

gulp主要参数有.src 、 .watch 、 .dest 、CLI:

gulp.src(globs[, options])

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

例如:gulp.task('less', function () {
                  return gulp.src('public/less/*.less')
                       .pipe(less())
                        .pipe(gulp.dest('public/dist'))
           });

 gulp.src返回了stream。

gulp.dest(path[, options])

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

gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));

文件被写入的路径是以所给的相对路径根据所给的目标目录计算而来。类似的,相对路径也可以根据所给的 base 来计算。

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

定义一个使用 Orchestrator 实现的任务(task)。

gulp.task('somename', function() {
  // 做一些事
});

name

任务的名字,如果你需要在命令行中运行你的某些任务,那么,请不要在名字中使用空格。

deps

类型: Array

一个包含任务列表的数组,这些任务会在你当前任务运行之前完成。

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
  // 做一些事
});

注意: 你的任务是否在这些前置依赖的任务完成之前运行了?请一定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方式:使用一个 callback,或者返回一个 promise 或 stream。

fn

该函数定义任务所要执行的一些操作。通常来说,它会是这种形式:gulp.src().pipe(someplugin())

异步任务支持

任务可以异步执行,如果 fn 能做到以下其中一点:

接受一个 callback
// 在 shell 中执行一个命令
var exec = require('child_process').exec;
gulp.task('jekyll', function(cb) {
  // 编译 Jekyll
  exec('jekyll build', function(err) {
    if (err) return cb(err); // 返回 error
    cb(); // 完成 task
  });
});
返回一个 stream
gulp.task('somename', function() {
  var stream = gulp.src('client/**/*.js')
    .pipe(minify())
    .pipe(gulp.dest('build'));
  return stream;
});
返回一个 promise
var Q = require('q');

gulp.task('somename', function() {
  var deferred = Q.defer();

  // 执行异步的操作
  setTimeout(function() {
    deferred.resolve();
  }, 1);

  return deferred.promise;
});

注意: 默认的,task 将以最大的并发数执行,也就是说,gulp 会一次性运行所有的 task 并且不做任何等待。如果你想要创建一个序列化的 task 队列,并以特定的顺序执行,你需要做两件事:

  • 给出一个提示,来告知 task 什么时候执行完毕,
  • 并且再给出一个提示,来告知一个 task 依赖另一个 task 的完成。

对于这个例子,让我们先假定你有两个 task,"one" 和 "two",并且你希望它们按照这个顺序执行:

  1. 在 "one" 中,你加入一个提示,来告知什么时候它会完成:可以再完成时候返回一个 callback,或者返回一个 promise 或 stream,这样系统会去等待它完成。

  2. 在 "two" 中,你需要添加一个提示来告诉系统它需要依赖第一个 task 完成。

因此,这个例子的实际代码将会是这样:

var gulp = require('gulp');

// 返回一个 callback,因此系统可以知道它什么时候完成
gulp.task('one', function(cb) {
    // 做一些事 -- 异步的或者其他的
    cb(err); // 如果 err 不是 null 或 undefined,则会停止执行,且注意,这样代表执行失败了
});

// 定义一个所依赖的 task 必须在这个 task 执行之前完成
gulp.task('two', ['one'], function() {
    // 'one' 完成后
});

gulp.task('default', ['one', 'two']);

gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])

监视文件,并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射(emit) change 事件。

四、基本插件操作介绍
1、gulp-less:

    使用gulp-less插件将less文件编译成css,当有less文件发生改变自动编译less,并保证less语法错误或出现异常时能正常工作并提示错误信息。

1.1、基本使用

1.2、编译多个less文件

3.3、匹配符“!”,“*”,“**”,“{}”

1.4、调用多模块(编译less后压缩css)

1.5、当less有各种引入关系时,编译后不容易找到对应less文件,所以需要生成sourcemap文件,方便修改

参考地址:http://www.ydcss.com/archives/34

2、gulp-uglify:

使用gulp-uglify压缩javascript文件,减小文件大小。

2.1、基本使用

2.2、压缩多个js文件

2.3、匹配符“!”,“*”,“**”,“{}”

2.4、指定变量名不混淆改变

2.5、gulp-uglify其他参数 具体参看

参考地址:http://www.ydcss.com/archives/54

3、gulp-imagemin

使用gulp-imagemin压缩图片文件(包括PNG、JPEG、GIF和SVG图片)

3.1、基本使用

3.2、gulp-imagemin其他参数 具体参看

3.3、深度压缩图片

3.3、只压缩修改的图片。压缩图片时比较耗时,在很多情况下我们只修改了某些图片,没有必要压缩所有图片,使用”gulp-cache”只压缩修改的图片,没有修改的图片直接从缓存文件读取(C:\Users\Administrator\AppData\Local\Temp\gulp-cache)。

参考地址:http://www.ydcss.com/archives/26

4、gulp-htmlmin

使用gulp-htmlmin压缩html,可以压缩页面javascript、css,去除页面空格、注释,删除多余属性等操作。

4.1、基本使用

6.2、配置gulpfile.js

基本使用(给页面引用url添加版本号,以清除页面缓存)

参考地址:http://www.ydcss.com/archives/49

7、gulp-minify-css

使用gulp-minify-css压缩css文件,减小文件大小,并给引用url添加版本号避免缓存。重要:gulp-minify-css已经被废弃,请使用gulp-clean-css,用法一致。

3.1、基本使用

3.2、gulp-minify-css 最终是调用clean-css,其他参数查看这里

3.3、给css文件里引用url加版本号(根据引用文件的md5生产版本号),像这样:

参考地址:http://www.ydcss.com/archives/41

8、gulp-autoprefixer

使用gulp-autoprefixer根据设置浏览器版本自动处理浏览器前缀。使用她我们可以很潇洒地写代码,不必考虑各浏览器兼容前缀。【特别是开发移动端页面时,就能充分体现它的优势。例如兼容性不太好的flex布局。】

8.1、基本使用

8.2、gulp-autoprefixer的browsers参数详解 (传送门):

● last 2 versions: 主流浏览器的最新两个版本

● last 1 Chrome versions: 谷歌浏览器的最新版本

● last 2 Explorer versions: IE的最新两个版本

● last 3 Safari versions: 苹果浏览器最新三个版本

● Firefox >= 20: 火狐浏览器的版本大于或等于20

● iOS 7: IOS7版本

● Firefox ESR: 最新ESR版本的火狐

● > 5%: 全球统计有超过5%的使用率

8.3、发现上面规律了吗,相信这不难看出,接下来说说各浏览器的标识:

Android for Android WebView.

BlackBerry or bb for Blackberry browser.

Chrome for Google Chrome.

Firefox or ff for Mozilla Firefox.

Explorer or ie for Internet Explorer.

iOS or ios_saf for iOS Safari.

Opera for Opera.

Safari for desktop Safari.

OperaMobile or op_mob for Opera Mobile.

OperaMini or op_mini for Opera Mini.

ChromeAndroid or and_chr

FirefoxAndroid or and_ff for Firefox for Android.

ExplorerMobile or ie_mob for Internet Explorer Mobile


更多详细资料:https://www.gulpjs.com.cn/

你可能感兴趣的:(gulp工具)