gulp(代码片段)

关键词：

Gulp: The streaming build system

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

项目构建是指项目上线之前对项目源代码进行一系列处理，使其以最佳的形式运行于线上服务器。
常见处理任包括以下几方面：

1. 模块化开发可以实现功能的复用并解决模块间的依赖关系，但带来好处的同时也使得功能代码的碎片化（若干文件）程度增加。
2. 使用less、sass等预处理器，可以降低CSS的维护成本，最终需要将这些预处理器编译成css文件；
3. 对静态资源（css、js、html、images）压缩合并可以提升网页打开速度，提高性能；

以上任务完如果完全靠手动来完成是非常耗时耗力的且容易出错，实际开发通常借助构建工具来实现。
所谓构建工具是指通过一系简单配置就可以帮我们实现合并、压缩、校验、预处理等一系列任务的软件工具。
常见的构建工具包括：Grunt、Gulp、F.I.S（百度出品）、webpack等。

Gulp是基于Nodejs开发的一个构建工具，借助gulp插件可以实现不同的构建任务，
其以简洁的配置和卓越的性能成为目前主流的构建工具。

Introduction

• 官方：http://gulpjs.com/
• 中文官网：http://www.gulpjs.com.cn/
• npm：https://www.npmjs.com/package/gulp
• Github：https://github.com/gulpjs/gulp
• Gitbook：https://wizardforcel.gitbooks.io/gulp-doc/content/2.html

Getting Started

官方文档：https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

一：Install the gulp command

在项目中使用 gulp 首先需要确保全局有 gulp-cli 环境，如果有就不需要执行下面的命令了。

1
2

yarn global add gulp-cli

二：Install gulp in your devDependencies

1
2

# npm install --save-dev gulp
yarn add -D gulp

三：Create a file called gulpfile.js in your project root with these contents:

1
2
3
4
5

var gulp = require('gulp');
gulp.task('default', () 
  console.log('hello gulp')
)

四：Test it out: Run the gulp command in your project directory:

1

gulp

API Documentation

官方文档：https://github.com/gulpjs/gulp/blob/master/docs/API.md

• gulp.task
• gulp.src
• gulp.dest
• gulp.watch

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

作用：定义各种不同的任务

• gulp.task(name, fn)
• gulp.task(name, deps, fn)
• gulp.task(name, fn(cb))
• gulp.task(name, deps, fn(cb))

一：普通任务

1
2
3
4
5
6
7

gulp.task('a', function () 
  console.log('1 aaa')
)
gulp.task('b', function () 
  console.log('2 bbb')
)

二：任务之间的依赖

1
2
3
4
5
6
7
8
9
10
11

gulp.task('a 大专栏  gulp', function (cb) 
  setTimeout(function () 
    console.log('1 aaa')
    cb()
  , 1000)
)
// b 任务依赖的 a 任务中的回调函数如果不调用，b 任务是不会执行的
gulp.task('b', ['a'], function () 
  console.log('2 bbb')
)

三：gulp 流控制

1
2
3
4
5
6
7
8
9
10

gulp.task('a', function () 
  // 当任务中是一个 gulp 流的时候则需要通过 return 来保证依赖中的执行顺序
  return gulp.src()
    .pipe()
    // ...
)
gulp.task('b', ['a'], function () 
  // doSomething
)

gulp.src(globs[, options])

gulp教程之gulp中文API：http://www.ydcss.com/archives/424

作用：根据路径（字符串或数组）读取需要构建的资源

globs

需要处理的源文件匹配符路径。

类型(必填)：String or StringArray，通配符路径匹配示例：

• src/a.js 指定具体文件；
• * 匹配所有文件 例：src/*.js (包含src下的所有js文件)；
• ** 匹配0个或多个子文件夹 例：src/**/*.js (包含src的0个或多个子文件夹下的js文件)；
• 匹配多个属性 例：src/a,b.js (包含a.js和b.js文件) src/*.jpg,png,gif(src下的所有jpg/png/gif文件)；
• ! 排除文件 例：!src/a.js (不包含src下的a.js文件)；

options.base

options.base：类型：String 设置输出路径以某个路径的某个组成部分为基础向后拼接，具体看下面示例：

1
2
3
4
5
6
7

gulp.src('client/js/**/*.js') 
  .pipe(minify())
  .pipe(gulp.dest('build'))  // Writes 'build/somedir/somefile.js'
 
gulp.src('client/js/**/*.js',  base: 'client' )
  .pipe(minify())
  .pipe(gulp.dest('build'))  // Writes 'build/js/somedir/somefile.js'

gulp.dest(path[, options])

作用：构建任务完成后资源存放的路径

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

监视指定资源的改动，然后可以调用响应的任务处理

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

常用插件

gulp的常见用法(代码片段)

Gulp用法Gulp的安装部署首先安装gulp全局安装gulp命令行工具npmi-ggulp-cli全局安装npmi-ggulp在项目的根目录创建一个gulpfile.js的文件Gulp中的方法gulp.src()：获取任务要处理的文件gulp.dest()：输出文件gulp.task()：建立gulp任务参数一：任务... 查看详情

简单gulp.js(代码片段)

引入相对应的文件letgulp=require("gulp");letinject=require("gulp-inject");letcleanCss=require("gulp-clean-css");letuglify=require("gulp-uglify");letpump=require("pump");letcache=require("gulp-cache");letrename 查看详情

gulp打包(代码片段)

gulp3.9.1官网：https://www.gulpjs.com.cn/gulp的优势注意：当前学习的是gulp3.9.1版本，安装时请指定版本，默认安装的为最新的版本4.0，两版本有差别。建立项目文件夹gulp入门指南：https://www.gulpjs.com.cn/docs/getting-started/开发环境，src文件... 查看详情

gulp4.0.2使用实例(代码片段)

gulpfile.jsconstgulp=require(‘gulp‘);constcssnano=require(‘gulp-cssnano‘);constsass=require(‘gulp-sass‘);constrename=require(‘gulp-rename‘);constjs=require(‘gulp-uglify‘);constimage_min=require(‘gulp- 查看详情

text安装gulp(代码片段)

查看详情

javascriptnpm\gulp安装(代码片段)

查看详情

gulp基本用法(代码片段)

...ode中的stream来读取和操作数据，其速度更快。eg:每次修改代码都要做的编译ES6、sass、压缩html这些重复性工作。gulp脚本就是为了减少重复性工作而做的工作。2.与grunt比较1.性能更高Grunt频繁的I 查看详情

gulp学习入门(代码片段)

constgulp=require('gulp');constless=require('gulp-less')//定义任务gulp.task('helloGulp',function()console.log('hellogulp'))//运行任务gulp任务名称gulp.task('dest',function()gulp.src('./src/*/*.*').pipe(gulp.dest('./dist'))console.log... 查看详情

前端构建之--gulp(代码片段)

gulp相关插件：1、del删除文件，用于清空文件2、browser-sync用于自动刷新浏览器3、gulp-htmlmin用于压缩html4、gulp-clean-css压缩css5、gulp-uglify压缩js6、gulp-replace替换路径7、gulp-base64将小图背景图转换为base64的形式，可以自己设置最大多... 查看详情

gulp介绍及常用插件使用方法(代码片段)

gulp是前端开发过程中对代码进行自动化构建的利器。它不仅能对资源进行优化，而且在开发过程中能够通过配置自动完成很多重复的任务，让我们可以专注于代码，提高工作效率。一、API介绍gulp常用的API只有四个：gulp.task(),gulp... 查看详情

jsonwpnode/gulp/webpack(代码片段)

查看详情

jsonvscode，tasks，gulp(代码片段)

查看详情

htmlfirebasehostingcache&gulp(代码片段)

查看详情

gulp简单介绍(代码片段)

Gulp介绍自动化构建工具，可以通过gulp对我们的代码进行全自动的编译。可以实现代码的自动压缩、编译、实时监测等功能。特点任务化基于流(数据流io:input/output)操作整个操作都是基于数据流进行操作具备属于gulp的内存，所有... 查看详情

gulp执行预处理(代码片段)

1.在项目中安装 gulp-sass插件来编译Sassnpminstallgulp-sass--save-dev 2.在gulpfile.js中编写vargulp=require(‘gulp‘);varsass=require(‘gulp-sass‘);//引入插件gulp.task(‘sass‘,function()returngulp.src(‘app/scss/styl 查看详情

markdown[修正]gulp问题修复(代码片段)

查看详情

json前端项目gulp设置(代码片段)

查看详情

shgulp指令#gulp#node(代码片段)

查看详情