Gulp笔记

最新推荐文章于 2023-01-15 19:26:54 发布

Fighting_No1

最新推荐文章于 2023-01-15 19:26:54 发布

阅读量597

点赞数

分类专栏： web前端文章标签：前端开发

本文链接：https://blog.csdn.net/Fighting_No1/article/details/78581082

版权

web前端专栏收录该内容

45 篇文章 4 订阅

订阅专栏

Gulp笔记

取材自：

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器。gulp是基于Nodejs的自动任务运行器，她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

安装和配置

1、安装gulp

全局安装 gulp：

$ npm install --global gulp

作为项目的开发依赖（devDependencies）安装：

$ npm install --save-dev gulp

查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装。

2、新建package.json文件

package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件。

执行命令提示符执行npm init进行手动安装，安装完成后会在当前文件夹下看到如下package.json文件

这里写图片描述

查看package.json帮助文档，命令提示符执行npm help package.json

3、新建gulpfile.js文件

gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件

gulpfile.js文件用法（以gulp-sass为例）

（1）导入工具包 require(‘node_modules里对应模块’)

var gulp=require('gulp')
var less=require('gulp-sass');

（2）定义一个testSass任务（自定义任务名称）

gulp.task('testSass',function(){
  gulp.src('src/sass/index.sass')     //该任务针对的文件
    .pipe(sass())      //该任务调用的模块
    .pipe(gulp.dest('src/css'));     //将会在src/css下生成index.css
  });
gulp.task("default",["watch"],function(){ //定义默认任务 并让gulp监视文件变化自动执行
  gulp.watch("sass/*.scss",["sass"]);
});

4、安装插件

要使用插件，就要先install,可以直接在package.json中直接配置devDependencies依赖项，然后再统一 npm install, 或者一个一个地安装，依赖项会自动建立。比如安装压缩css的依赖包：

npm install gulp-minify-css --save-dev

5、运行gulp

$ gulp
默认的名为 default 的任务（task）将会被运行。

想要单独执行特定的任务（task），请输入
gulp <task> <othertask>

gulp API 文档

gulp.src(globs[, options])

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

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

glob 请参考 node-glob 语法或者，你也可以直接写文件的路径。

以下字符在路径部分中使用时具有特殊的魔术意义：

* 在单个路径部分中匹配0个或更多个字符
? 匹配1个字符
[…] 匹配一系列字符，类似于RegExp范围。如果范围的第一个字符是!或^则为匹配任何不在范围内的字符。
!(pattern|pattern|pattern) 匹配任何不符合所有提供的模式的字符。
?(pattern|pattern|pattern) 匹配零或一次出现的模式
+(pattern|pattern|pattern) 匹配一个或多个出现的模式
*(a|b|c) 匹配零个或多个出现的模式
@(pattern|pat*|pat?erN) 匹配所提供的模式之一
** 如果“globstar”在路径部分中是单独的，则它匹配零个或多个目录和搜索匹配的子目录。它不会抓取符号链接的目录。

globs

类型： String 或 Array

所要读取的 glob 或者包含 globs 的数组。

options

类型： Object

通过 glob-stream 所传递给 node-glob 的参数。

除了 node-glob 和 glob-stream 所支持的参数外，gulp 增加了一些额外的选项参数：

options.buffer

类型： Boolean 默认值： true

如果该项被设置为 false，那么将会以 stream 方式返回 file.contents 而不是文件 buffer 的形式。这在处理一些大文件的时候将会很有用。**注意：**插件可能并不会实现对 stream 的支持。

options.read

类型： Boolean 默认值： true

如果该项被设置为 false，那么 file.contents 会返回空值（null），也就是并不会去读取文件。

options.base

类型： String 默认值：将会加在 glob 之前 (请看 glob2base)

如, 请想像一下在一个路径为 client/js/somedir 的目录中，有一个文件叫 somefile.js ：

gulp.src('client/js/**/*.js') // 匹配 'client/js/somedir/somefile.js' 并且将 `base` 解析为 `client/js/`
  .pipe(minify())
  .pipe(gulp.dest('build'));  // 写入 'build/somedir/somefile.js'

gulp.src('client/js/**/*.js', { base: 'client' })
  .pipe(minify())
  .pipe(gulp.dest('build'));  // 写入 'build/js/somedir/somefile.js'

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.src 来了解更多信息。

path

类型： String or Function

文件将被写入的路径（输出目录）。也可以传入一个函数，在函数中返回相应路径，这个函数也可以由 vinyl 文件实例来提供。

options

类型： Object

options.cwd

类型： String 默认值： process.cwd()

输出目录的 cwd 参数，只在所给的输出目录是相对路径时候有效。

options.mode

类型： String 默认值： 0777

八进制权限字符，用以定义所有在输出目录中所创建的目录的权限。

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”，并且你希望它们按照这个顺序执行：

在 “one” 中，你加入一个提示，来告知什么时候它会完成：可以在完成时候返回一个 callback，或者返回一个 promise 或 stream，这样系统会去等待它完成。
在 “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 事件。

glob

类型： String or Array

一个 glob 字符串，或者一个包含多个 glob 字符串的数组，用来指定具体监控哪些文件的变动。

opts

类型： Object

传给 gaze 的参数。

tasks

类型： Array

需要在文件变动后执行的一个或者多个通过 gulp.task() 创建的 task 的名字，

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

cb(event)

类型： Function

每次变动需要执行的 callback。

gulp.watch('js/**/*.js', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

callback 会被传入一个名为 event 的对象。这个对象描述了所监控到的变动：

event.type

类型： String

发生的变动的类型：added, changed 或者 deleted。

event.path

类型： String

触发了该事件的文件的路径。

gulp 插件

这里只介绍部分常用的gulp插件。

gulp-sass

gulp-sass - 通过 libsass将Sass编译成 CSS

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sourcemaps.init())
     //设置输出类型
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

gulp-typescript

gulp-typescript - TypeScript编译成JavaScript.

var gulp = require('gulp');
var ts = require('gulp-typescript');

gulp.task('default', function () {
    return gulp.src('src/**/*.ts')
        .pipe(ts({
            noImplicitAny: true,
            outFile: 'output.js'
        }))
        .pipe(gulp.dest('built/local'));
});

gulp-concat

gulp-concat - 合并文件.

var concat = require('gulp-concat');

gulp.task('scripts', function() {
  return gulp.src('./lib/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/'));
});

gulp-watch:只重新编译被更改过的文件

var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');

gulp.task('default', function() {
  return gulp.src('sass/*.scss')
    .pipe(watch('sass/*.scss'))
    .pipe(sass())
    .pipe(gulp.dest('dist'));
});

gulp-rename:重命名

同时输出压缩过的和未压缩版本的文件可以通过使用 gulp-rename 然后 pipe 到 dest 两次来实现 (一次是压缩之前的，一次是压缩后的)：

'use strict';

var gulp = require('gulp');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');

var DEST = 'build/';

gulp.task('default', function() {
  return gulp.src('foo.js')
    // 这会输出一个未压缩过的版本
    .pipe(gulp.dest(DEST))
    // 这会输出一个压缩过的并且重命名为 foo.min.js 的文件
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(gulp.dest(DEST));
});

gulp-clean:删除文件及文件夹

var gulp        = require('gulp'),
    clean       = require('gulp-clean'),
    pump        = require('pump');
gulp.task('clean', function(cb) {
    pump([
        gulp.src('./dist'),
        clean()
    ], cb)
})

gulp-merge-json:合并json文件

var merge = require('gulp-merge-json');
 
/*
    Basic functionality
 */
gulp.src('jsonFiles/**/*.json')
    .pipe(merge())
    .pipe(gulp.dest('./dist'));

gulp-csso

gulp-csso - 压缩 CSS 通过 CSSO.

var gulp = require('gulp');
var csso = require('gulp-csso');

gulp.task('default', function () {
    return gulp.src('./main.css')
        .pipe(csso())
        .pipe(gulp.dest('./out'));
});

gulp.task('development', function () {
    return gulp.src('./main.css')
        .pipe(csso({
            restructure: false,
            sourceMap: true,
            debug: true
        }))
        .pipe(gulp.dest('./out'));
});

gulp-uglify

gulp-uglify - 压缩 JavaScript 通过 UglifyJS2.

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var pump = require('pump');

gulp.task('compress', function (cb) {
  pump([
        gulp.src('lib/*.js'),
        uglify(),
        gulp.dest('dist')
    ],
    cb
  );
});

gulp-htmlmin

gulp-htmlmin - 压缩 HTML 通过 html-minifier.

var gulp     = require('gulp'),
    htmlmin  = require('gulp-htmlmin'),
    pump     = require('pump');

gulp.task('testHtmlmin', function () {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    pump([
        gulp.src('src/html/*.html'),
        htmlmin(options),
        gulp.dest('dist/html')
    ], cb)
});

gulp-imagemin

gulp-imagemin - 压缩 PNG, JPEG, GIF and SVG 图片通过 imagemin.

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');

gulp.task('default', () =>
    gulp.src('src/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'))
);

imagemin({
            optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
        }),

imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性
            use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件
        }),

gulp-uncss

gulp-uncss - 移除未使用的CSS选择器通过 UnCSS.

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var uncss = require('postcss-uncss');

gulp.task('default', function () {
    var plugins = [
        uncss({
            html: ['index.html', 'posts/**/*.html', 'http://example.com']
        }),
    ];
    return gulp.src('./src/*.css')
        .pipe(postcss(plugins))
        .pipe(gulp.dest('./dest'));
});

var gulp = require('gulp');
var uncss = require('gulp-uncss');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var nano = require('gulp-cssnano');

gulp.task('default', function () {
    return gulp.src('styles/**/*.scss')
        .pipe(sass())
        .pipe(concat('main.css'))
        .pipe(uncss({
            html: ['index.html', 'posts/**/*.html', 'http://example.com']
        }))
        .pipe(nano())
        .pipe(gulp.dest('./out'));
});

gulp-pug

gulp-pug - Pug 转换成 HTML.

var pug = require('gulp-pug');

gulp.task('views', function buildHTML() {
  return gulp.src('views/*.pug')
  .pipe(pug({
    // Your options in here.
  }))
});

代码校验

gulp-csslint - 通过CSSLint自动校验CSS.
gulp-htmlhint - 通过HTMLHint校验HTML.
gulp-jshint - 通过JSHint发现错误和潜在的问题.
gulp-jscs - 通过jscs检查JavaScript代码风格.
gulp-coffeelint - 一种用来保证CoffeeScript代码风格统一的检查。
gulp-tslint - gulp的TypeScript代码校验插件.
gulp-eslint - ECMAScript/JavaScript代码校验.
gulp-w3cjs - 通过w3cjs检验HTML.
gulp-lesshint - 通过lesshint校验LESS.

gulp-livereload

gulp-livereload - Gulp的实时加载插件.

var gulp = require('gulp'),
    less = require('gulp-less'),
    livereload = require('gulp-livereload');

gulp.task('less', function() {
  gulp.src('less/*.less')
    .pipe(less())
    .pipe(gulp.dest('css'))
    .pipe(livereload());
});

gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('less/*.less', ['less']);
});

gulp-changed

gulp-changed - 仅让发生改变的文件通过.

const gulp = require('gulp');
const changed = require('gulp-changed');
const ngAnnotate = require('gulp-ng-annotate'); // Just as an example

const SRC = 'src/*.js';
const DEST = 'dist';

gulp.task('default', () =>
    gulp.src(SRC)
        .pipe(changed(DEST))
        // `ngAnnotate` will only get the files that
        // changed since the last time it was run
        .pipe(ngAnnotate())
        .pipe(gulp.dest(DEST))
);

gulp.task('jade', () =>
    gulp.src('src/**/*.jade')
        .pipe(changed('app', {extension: '.html'}))
        .pipe(jade())
        .pipe(gulp.dest('app'))
);

gulp-if

gulp-if - 按照条件运行task.

var gulp     = require('gulp'),
    gulpif   = require('gulp-if'),
    imagemin = require('gulp-imagemin'),
    pump     = require('pump');

// 是否生产环境
global.production = true;

gulp.task('testImagemin', function () {
    pump([
        gulp.src('src/img/*.{png,jpg,gif,ico}'),
        // 生产环境，对图片进行压缩，否则不压缩
        gulpif(!global.production, imagemin()),
        gulp.dest('dist/img')
    ])
});

browser-sync:同步浏览器

开启浏览器，并定义dist目录下的html/css/js发生变化直接同步至浏览器

var gulp         = require('gulp'),
    browserSync  = require('browser-sync').create();

gulp.task('browser', function() {
    browserSync.init([
        './dist/**/*.html',
        './dist/**/*.css',
        './dist/**/*.js'
    ], {
        server: {
            baseDir: "./"
        }
    });
});

// 监控src目录下css文件，发生变化则执行css任务
// 监控src目录下js文件，发生变化则执行js任务
// 监控src目录下html文件，发生变化则执行html任务
gulp.task('watch', ['browser'], function() {
    gulp.watch('./src/**/*.css', ['css']);
    gulp.watch('./src/**/*.js', ['js']);
    gulp.watch('./src/**/*.html', ['html']);
})

gulp-autoprefixer

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

var gulp         = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    pump         = require('pump');

gulp.task('testAutoFx', function(cb) {
    pump([
        gulp.src('src/css/index.css'),
        autoprefixer({
            browsers: ['last 2 versions', 'Android >= 4.0'],
            //是否美化属性值 默认：true 像这样：
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            cascade: true, 
            //是否去掉不必要的前缀 默认：true
            remove :true 
        }),
        gulp.dest('dist/css')
    ], cb)
});

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%的使用率

各浏览器的标识：

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.

测试

gulp-mocha - 运行Mocha测试用例.
gulp-jasmine - 在Node.js中运行Jasmine 2 测试用例.
gulp-protractor - 为Protractor测试用例包裹Gulp.
gulp-coverage - 为Node.js覆盖相对于运行的测试运行独立的报告.
gulp-karma - 通过Gulp运行Karma测试用例.
gulp-ava- 通过Gulp运行AVA 测试用例.

gulp-zip

gulp-zip - 以ZIP格式压缩文件

var gulp = require('gulp');
var zip = require('gulp-zip');

gulp.task('default', () =>
	gulp.src('src/*')
		.pipe(zip('archive.zip'))
		.pipe(gulp.dest('dist'))
);

minimist:从命令行传递参数

// npm install --save-dev gulp gulp-if gulp-uglify minimist

var gulp = require('gulp');
var gulpif = require('gulp-if');
var uglify = require('gulp-uglify');

var minimist = require('minimist');

var knownOptions = {
  string: 'env',
  default: { env: process.env.NODE_ENV || 'production' }
};

var options = minimist(process.argv.slice(2), knownOptions);

gulp.task('scripts', function() {
  return gulp.src('**/*.js')
    .pipe(gulpif(options.env === 'production', uglify())) // 仅在生产环境时候进行压缩
    .pipe(gulp.dest('dist'));
});

然后，通过如下命令运行 gulp：