正文 

当前位置： 首页 > java > java示例

gulp构建前端自动化工作流之：常用插件介绍及使用

每天都要进步一点点      2022-02-07     488

关键词：

在对Gulp有了一个初步的了解之后，我们开始构建一个较为完整的Gulp开发环境。

本文主要分为6个段落：

  • 1. 构建项目目录结构（Directory Structure Build）
  • 2. 插件介绍及使用方法（Tasks and dependencies）
  • 3. 扩展优化（Extend & Optimize Task）
  • 4. 其他插件介绍（Other plug-ins）
  • 5. 匹配规则（Match Files）
  • 6. 注意事项（Attention）

关于Gulp的入门介绍及安装方法，可先去 《Gulp构建前端自动化工作流之：入门介绍及LiveReload的使用》 这篇文章查看。对其有个初步认识后，便于后文的理解。

1. 构建项目目录结构（Directory Structure Build）

 

+ my-gulp（项目文件夹）
  + node_modules Gulp组件目录
  + dist 发布环境
  + css 编译后的CSS文件
    ─ etc...
  + images 压缩后的图片文件
    ─ etc...
  + js 编译后的JS文件
    ─ etc...
  ─ html 静态文件
  + src 开发环境
  + sass SASS文件
    ─ etc...
  + images 图片文件
    ─ etc...
  + js JS文件
    ─ etc...
  ─ html 静态文件
  ─ gulpfile.js Gulp任务文件

注：
+ 表示目录  ─ 表示文件

2. 插件介绍及使用方法（Tasks and dependencies）

2.1 HTML处理（HTML Task）

 

仅把开发环境中的HTML文件，移动至发布环境。

基础配置：

gulp.task(‘html‘, function() {
  return gulp.src(‘src/**/*.html‘) // 指明源文件路径、并进行文件匹配
    .pipe(‘dist‘); // 输出路径
});

执行命令：

gulp html

2.2 样式处理（CSS Task）

CSS预处理/Sass编译 ( gulp-ruby-sass ) ：

相比较glup-sass而言，速度会稍许慢点，但功能更多并且稳定。

安装SASS：

1. 像Gulp基于Node.js一样，Sass基于Ruby环境，所以我们先去官网下载并安装 Ruby （在安装的时候，请勾选 Add Ruby executables to your PATH 这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境）。

2. 安装完ruby之后，在开始菜单中，找到刚才我们安装的ruby，打开 Start Command Prompt with Ruby 

3. 然后直接在命令行中输入 gem install sass 按回车键确认，等待一段时间就会提示你sass安装成功。

注：

由于近期墙的比较严重，外加（上海）电信限制了外网访问速度。如果安装失败，请使用淘宝的Ruby镜像。具体操作方法请参考 淘宝RubyGems镜像安装 sass 。

安装命令：

npm install gulp-ruby-sass --save-dev

基础配置：

var gulp = require(‘gulp‘); // 基础库
var sass = require(‘gulp-ruby-sass‘); // sass/scss编译

gulp.task(‘sass‘, function () {
     return sass(‘src/sass‘, { style: ‘compressed‘ }) // 指明源文件路径、并进行文件匹配（style: ‘compressed‘ 表示输出格式）
          .on(‘error‘, function (err) {
               console.error(‘Error!‘, err.message); // 显示错误信息
          })
          .pipe(gulp.dest(‘dist/css‘)); // 输出路径
});

执行命令：

gulp sass

插件提供4种输出格式：

nested：嵌套缩进的css代码，它是默认值。

expanded：没有缩进的、扩展的css代码。

compact：简洁格式的css代码。

compressed：压缩后的css代码。

注：使用前清看清 gulp-ruby-sass 写法，不要直接拿 gulp-sass 的写法来套用，两者并不完全相同。

2.3 脚本压缩&重命名（Javascript Task）

JS文件压缩( gulp-uglify )：

使用uglify引擎压缩JS文件。

安装命令：

npm install gulp-uglify --save-dev

基础配置：

var gulp = require(‘gulp‘); // 基础库
var uglify = require(‘gulp-uglify‘); // js压缩

gulp.task(‘script‘, function() {
  return gulp.src(‘src/js/*.js‘) // 指明源文件路径、并进行文件匹配
    .pipe(uglify({ preserveComments:‘some‘ })) // 使用uglify进行压缩，并保留部分注释
    .pipe(gulp.dest(‘dist/js‘)); // 输出路径
});

执行命令：

gulp script

2.4 图片处理（Image Task）

图片压缩( gulp-imagemin ) + 深度压缩( imagemin-pngquant )：

压缩PNG、JPEG、GIF和SVG图像。

gulp-imagemin集成了 gifsicle 、 jpegtran 、 optipng 、 svgo 这4个插件。而imagemin-pngquant是imagemin插件的一个扩展插件，用于深度压缩图片。

安装命令：

npm install gulp-imagemin imagemin-pngquant --save-dev

基础配置：

var gulp = require(‘gulp‘); // 基础库
var imagemin = require(‘gulp-imagemin‘), // 图片压缩
  pngquant = require(‘imagemin-pngquant‘); // 深度压缩

gulp.task(‘images‘, function(){
  return gulp.src(‘src/images/**/*.{png,jpg,gif,svg}‘) // 指明源文件路径、并进行文件匹配
    .pipe(imagemin({
      progressive: true, // 无损压缩JPG图片
      svgoPlugins: [{removeViewBox: false}], // 不移除svg的viewbox属性
      use: [pngquant()] // 使用pngquant插件进行深度压缩
    }))
    .pipe(gulp.dest(‘dist/images‘)); // 输出路径
});

执行命令：

gulp images

注：一般我们所使用的图片压缩方法，都会对图像造成一定的损失，这个和压缩比率有一定的关系。通常我们所说的无损压缩，也只是控制在我们肉眼难以发现的范围内。换句话来说，在你保存切图的同时，其实已经对图像造成了一定的损失，因为没什么人会选择100%最佳质量导出图片。两者是差不多的概念。

2.5 自动刷新（LiveReload Task）

网页自动刷新（文件变动后即时刷新页面）( gulp-livereload ) + 静态服务器：( gulp-webserver )：

安装命令：

npm install gulp-livereload gulp-webserver --save-dev
var gulp = require(‘gulp‘); // 基础库
var livereload = require(‘gulp-livereload‘), // 网页自动刷新（文件变动后即时刷新页面）
  webserver = require(‘gulp-webserver‘); // 本地服务器

// 注册任务
gulp.task(‘webserver‘, function() {
  gulp.src( ‘.‘ ) // 服务器目录（.代表根目录）
  .pipe(webserver({ // 运行gulp-webserver
    livereload: true, // 启用LiveReload
    open: true // 服务器启动时自动打开网页
  }));
});

// 监听任务
gulp.task(‘watch‘,function(){
  // 监听 html
  gulp.watch(‘src/**/*.html‘, [‘html‘])
  // 监听 scss
  gulp.watch(‘src/scss/*.scss‘, [‘css‘]);
  // 监听 images
  gulp.watch(‘src/images/**/*.{png,jpg,gif,svg}‘, [‘images‘]);
  // 监听 js
  gulp.watch(‘src/js/*.js‘, [‘script‘]);
});
 
// 默认任务
gulp.task(‘default‘,[‘webserver‘,‘watch‘]);

执行命令：

gulp

3. 扩展优化（Extend & Optimize Task）

至此， 一套简单的前端自动化工作流/Gulp工作流便已经完成 。现在，我们开始优化并扩展这些插件，使我们的工作流更为"智能"。

3.1 文件重命名( gulp-rename )：

像jQuery一样，通常为了表示该文件是压缩版，会在文件名后加上 .min 后缀。

安装命令：

npm install gulp-rename --save-dev

基础配置：

var gulp = require(‘gulp‘); // 基础库
var uglify = require(‘gulp-uglify‘), // js压缩
  rename = require(‘gulp-rename‘); // 文件重命名

gulp.task(‘script‘, function() {
  return gulp.src(‘src/js/*.js‘) // 指明源文件路径、并进行文件匹配
    .pipe(rename({ suffix: ‘.min‘ })) // 重命名
    .pipe(uglify({ preserveComments:‘some‘ })) // 使用uglify进行压缩，并保留部分注释
    .pipe(gulp.dest(‘dist/js‘)); // 输出路径
});

执行命令：

gulp script

3.2 来源地图( gulp-sourcemaps )：

这是个非常有用的插件，我们在压缩、合并等操作之后，调试时所看到的内容，都是编译后的代码。这样就导致一个问题，调试过程中无法和源码（编译时的代码）位置相对应，让调试变的十分困难。

例如：一个jQuery，源码接近1万行。但压缩后只有短短的3~4行，并且变量名称也已发生改变。此时一旦报错，你很难从错误信息中直接找到对应代码的原始位置。同样，CSS也会遇到类似问题。

而sourcemaps作用，便是成一个 .map 文件，里面储存着对应的源码位置。并内嵌在你转换后的文件底部 /*# sourceMappingURL=maps/filename.css.map */。这样在我们调试时，就会直接显示（映射）源码，而不时编译后的代码。

安装命令：

npm install gulp-sourcemaps --save-dev

基础配置：

var gulp = require(‘gulp‘); // 基础库
var uglify = require(‘gulp-uglify‘), // js压缩
  rename = require(‘gulp-rename‘), // 文件重命名
  sourcemaps = require(‘gulp-sourcemaps‘); // 来源地图

gulp.task(‘script‘, function() {
  return gulp.src([‘src/js/*.js‘,‘!*.min.js‘]) // 指明源文件路径、并进行文件匹配，排除 .min.js 后缀的文件
    .pipe(sourcemaps.init()) // 执行sourcemaps
    .pipe(rename({ suffix: ‘.min‘ })) // 重命名
    .pipe(uglify({ preserveComments:‘some‘ })) // 使用uglify进行压缩，并保留部分注释
    .pipe(sourcemaps.write(‘maps‘)) // 地图输出路径（存放位置）
    .pipe(gulp.dest(‘dist/js‘)); // 输出路径
});

执行命令：

gulp script

3.3 只操作有过修改的文件( gulp-changed )：

比如我们有20个文件，当你修改其中1个文件时，由于任务的局限性，也会把其余19匹配的无辜的同类给一并进行处理，这样就大大降低了效率。而 gulp-changed 插件，会首先把文件进行比对，如果文件没有改动，则跳过后续任务。

安装命令：

npm install gulp-changed --save-dev

基础配置：

var gulp = require(‘gulp‘); // 基础库
var imagemin = require(‘gulp-imagemin‘), // 图片压缩
  pngquant = require(‘imagemin-pngquant‘), // 深度压缩
  changed = require(‘gulp-changed‘); // 只操作有过修改的文件

gulp.task(‘images‘, function(){
  return gulp.src(‘src/images/**/*.{png,jpg,gif,svg}‘) // 指明源文件路径、并进行文件匹配
    .pipe(changed(‘dist/images‘)) // 对比文件是否有过改动（此处填写的路径和输出路径保持一致）
    .pipe(imagemin({
      progressive: true, // 无损压缩JPG图片
      svgoPlugins: [{removeViewBox: false}], // 不移除svg的viewbox属性
      use: [pngquant()] // 使用pngquant插件进行深度压缩
    }))
    .pipe(gulp.dest(‘dist/images‘)); // 输出路径
});

执行命令：

gulp images

此时我们再去 dist/images 文件夹，查看每个图片的最后修改日期，你就会发现只针对你刚才修改过的图片（文件）行了处理，而那些之前已经处理过的图片则没有再进行操作。

注：无论是 gulp-changed 还是下文中提到的 gulp-cache ，对 sass 文件无效，始终会对所有匹配文件进行操作。

3.4 文件合并( gulp-concat )：

比如我们有多个JS库，jquery.min.js、bootstrap.min.js、angular.min.js。此时可以通过合并，减少网络请求。

安装命令：

npm install gulp-concat --save-dev

基础配置：

var gulp = require(‘gulp‘); // 基础库
var concat = require("gulp-concat"); // 文件合并
 
gulp.task(‘concat‘, function () {
    gulp.src(‘js/*.min.js‘)  // 要合并的文件
    .pipe(concat(‘libs.js‘))  // 合并成libs.js
    .pipe(gulp.dest(‘dist/js‘));
});

执行命令：

gulp concat

3.5 文件清理( gulp-clean )：

简单的说，就是一键删除（清理）文件。就拿为了调试所生成的 .map 文件为例，在正式发布时并不需要，此时我们就能通过 clean任务进行清理。

安装命令：

npm install gulp-clean --save-dev

基础配置：

var gulp = require(‘gulp‘); // 基础库
var clean = require(‘gulp-clean‘); // 文件清理

gulp.task(‘clean‘, function() {
  return gulp.src([‘dist/css/maps‘,‘dist/js/maps‘], {read: false})
    .pipe(clean());
});

执行命令：

gulp clean

4. 其他插件介绍（Other plug-ins）

这部分插件作为扩展阅读，只做简单介绍。每个插件都有每个插件的特性，根据你的喜好和实际操作环境而定，萝卜青菜各有所爱。用的人最多的，不代表就是适合你的。总之，有时间有精力的，可以多试试，多玩玩，多配配，这里也只是冰山一角。

4.1 CSS类

1. CSS压缩 ( gulp-minify-css )

安装命令：

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

基础配置：

var gulp = require(‘gulp‘); // 基础库
var minifyCss = require(‘gulp-minify-css‘); // CSS压缩

gulp.task(‘minify-css‘, function() {
  return gulp.src(‘css/*.css‘)
    .pipe(gulp.dest(‘dist‘));
});

执行命令：

gulp minify-css

2. CSS预处理/Less编译 ( gulp-less )

安装命令：

npm install gulp-autoprefixer --save-dev

基础配置：

var gulp = require(‘gulp‘); // 基础库
var less = require(‘gulp-less‘); // LESS编译

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

执行命令：

gulp less

3. 自动添加CSS3浏览器前缀( gulp-autoprefixer ):

-prefix-free 大家肯定都比较熟，会自动为CSS添加上浏览器的前缀，帮你摆脱前缀痛苦。而 gulp-autoprefixer 插件同样如此。

安装命令：

npm install gulp-autoprefixer --save-dev

基础配置：

var gulp = require(‘gulp‘); // 基础库
var autoprefixer = require(‘gulp-autoprefixer‘); // 自动添加CSS3浏览器前缀
gulp.task(‘prefix‘, function () {
  gulp.src(‘src/css/*.less‘)
    .pipe(less())
    .pipe(gulp.dest(‘src/css‘));
});
var gulp = require(‘gulp‘); // 基础库
var sass = require(‘gulp-ruby-sass‘), // sass/scss编译
  autoprefixer = require(‘gulp-autoprefixer‘); // 自动添加CSS3浏览器前缀
gulp.task(‘sass‘, function () {
  return sass(‘src/sass‘, { style: ‘compressed‘ }) // 指明源文件路径、并进行文件匹配
    .on(‘error‘, function (err) {
      console.error(‘Error!‘, err.message); // 显示错误信息
    })
    .pipe(autoprefixer({
      browsers: [‘last 2 versions‘], // 主流浏览器的最新两个版本
      cascade: false // 是否美化属性值
    }))
    .pipe(gulp.dest(‘dist/css‘)); // 输出路径
});

执行命令：

gulp sass

4.2 图像类

1. 使用TinyPN API压缩图片( gulp-tinypng )：

使用TinyPNG官方API进行图片压缩。我个人比较喜欢这个，因为之前一直有在使用。但由于TinyPNG服务器在国外，有时执行起来会很慢，除非你有VPN，所以在这只做简单介绍。经过我的测试，gulp-tinypng压缩后的图片大小，相当于使用imagemin-pngquant深度压缩后的大小。使用时需先注册TinyPNG账户，获你的API KEY。免费版每个月可以压缩500张图片，对于一般项目而言已经足够。

安装命令：

npm install gulp-tinypng --save-dev

基础配置：

var gulp = require(‘gulp‘); // 基础库
var tinypng = require(‘gulp-tinypng‘); // 使用TinyPN API压缩图片

gulp.task(‘tinypng‘, function(){
    return gulp.src(‘src/images/**/*‘) // 源地址
     .pipe(tinypng(‘填写TinyPN API KEY‘))
    .pipe(gulp.dest(‘dist/images‘)); // 输出路径
});

执行命令：

gulp tinypng

4.3 其他

1. 缓存代理( gulp-cache )：

缓存操作过的文件，当文件修改时，只编译当前修改的文件。其余文件直接从缓存中调取，提高效率。缺点：因为是缓存，所以如果文件被删除，但没及时清理缓存文件时，就会导致被删除的文件又从缓存中读取了出来，所谓成也萧何败也萧何。

安装命令：

npm install gulp-cache --save-dev

基础配置：

var gulp = require(‘gulp‘); // 基础库
var imagemin = require(‘gulp-imagemin‘), // 图片压缩
  pngquant = require(‘imagemin-pngquant‘), // 深度压缩
  pngquant = require(‘imagemin-cache‘), // 缓存代理
  clean = require(‘imagemin-clean‘); // 文件清理

// imagemin 图片压缩（利用cache）
gulp.task(‘images‘, function(){
  return gulp.src(‘src/images/**/*.{png,jpg,gif,svg}‘) // 指明源文件路径、并进行文件匹配
    .pipe(cache(imagemin({
      progressive: true, // 无损压缩JPG图片
      svgoPlugins: [{removeViewBox: false}], // 不要移除svg的viewbox属性
      use: [pngquant()] // 使用pngquant插件进行深度压缩
    })))
    .pipe(gulp.dest(‘dist/images‘)); // 输出路径
});
// 清理缓存文件
gulp.task(‘clean‘, function (done) {
  return cache.clearAll(done);
});

5. 匹配规则（Match Files）

Gulp使用 node-glob 模块，借助 minimatch 库，将glob表达式(glob expressions)转换成JavaScript正则表达式(JavaScript RegExp) ，从而实现文件匹配功能。我们所看到的 ** 和 * 都是其所提供的语法：

* 匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾。

** 匹配路径中的0个或多个目录及其子目录，需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。

? 匹配文件路径中的一个字符(不会匹配路径分隔符)。

[...] 匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为 ^ 或 !时，则表示不匹配方括号中出现的其他字符中的任意一个。

!(pattern|pattern|pattern) 匹配任何与括号中给定的任一参数一致的都不匹配的。

?(pattern|pattern|pattern) 匹配括号中给定的任一参数0次或1次。

+(pattern|pattern|pattern) 匹配括号中给定的任一参数至少1次。

*(a|b|c) 匹配括号中给定的任一参数0次或多次。

@(pattern|pat*|pat?erN) 匹配括号中给定的任一参数1次。

用实例来加深理解：

* 能匹配 a.js , x.y , abc , abc/ ，但不能匹配 a/b.js

*.* 能匹配 a.js , style.css , a.b , x.y 
*/*/*.js 能匹配 a/b/c.js , x/y/z.js ，不能匹配 a/b.js , a/b/c/d.js 

** 能匹配 abc , a/b.js , a/b/c.js , x/y/z , x/y/z/a.b ，能用来匹配所有的目录和文件

**/*.js 能匹配 foo.js , a/foo.js , a/b/foo.js , a/b/c/foo.js 
a/**/z 能匹配 a/z , a/b/z , a/b/c/z , a/d/g/h/j/k/z 

a/**b/z 能匹配 a/b/z , a/sb/z ，但不能匹配 a/x/sb/z ，因为只有单 **单独出现才能匹配多级目录

?.js 能匹配 a.js , b.js , c.js 

a?? 能匹配 a.b , abc ，但不能匹配 ab/ ，因为它不会匹配路径分隔符

[xyz].js 只能匹配 x.js , y.js , z.js ，不会匹配 xy.js , xyz.js 等，整个中括号只代表一个字符

[^xyz].js 能匹配 a.js , b.js , c.js 等，不能匹配 x.js , y.js , z.js

当有多种匹配模式时可以使用数组：

// 使用数组的方式来匹配多种文件
gulp.src([‘js/*.min.js‘,‘sass/*.min.css‘])

使用数组的方式还有一个好处就是可以很方便的使用排除模式，在数组中的单个匹配模式前加上 ! 即是排除模式，它会在匹配的结果中排除这个匹配，要注意一点的是不能在数组中的第一个元素中使用排除模式：

// 使用数组的方式来匹配多种文件
gulp.src([‘*.js‘,‘!b*.js‘]) // 匹配所有js文件，但排除掉以b开头的js文件
gulp.src([‘!b*.js‘,*.js]) // 不会排除任何文件，因为排除模式不能出现在数组的第一个元素中

此外，还可以使用展开模式。展开模式以花括号作为定界符，根据它里面的内容，会展开为多个模式，最后匹配的结果为所有展开的模式相加起来得到的结果。展开的例子如下：

a{b,c}d 会展开为 abd,acd 
a{b,}c 会展开为 abc,ac 
a{0..3}d 会展开为 a0d , a1d , a2d , a3d 
a{b,c{d,e}f}g 会展开为 abg , acdfg , acefg 

a{b,c}d{e,f}g 会展开为 abdeg , acdeg , abdeg , abdfg

6. 注意事项（Attention）

    • watch 的时候路径不要用 ‘./path‘，直接使用 ‘/path‘ 即可不然会导致新增文件无法被 watch。
    • gulp 对于 one after one 的任务链，需要加 return，比如 gulp clean










前端构建工具gulpjs的使用介绍及技巧

gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快。如果你还没有使用过前端构建工具，或者觉得gruntjs... 查看详情

前端构建工具gulpjs的使用介绍及技巧

gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快。如果你还没有使用过前端构建工具，或者觉得gruntjs... 查看详情

前端笔试题之什么是gulp

什么是gulp？　　　　官网中这样写道：gulp是自动化构建工具。虽然经常有在用gulp，看了之后还是懵懵的。看了一下别人的理解，这样说道：Gulp是基于node.js的一个前端自动化构建工具，开发这可以使用它构建自动化工作流程（... 查看详情

前端工作流程自动化——grunt/gulp自动化

前端工作流程自动化——Grunt/Gulp自动化　　Grunt/Gulp都是node.js下的模块，简单来说是自动化任务运行器，两者都有社区及大量的插件支撑，在所有的自动化工具领域里，这两者是最好的前端自动化构建工具。　　那么问题来了，... 查看详情

前端小萌新必知必会之实现自定义gulp插件

...构建工具Gulp,并定制符合特定需求的Gulp插件。Gulp是一个自动化和增强工作流的工具包利用Gulp和JavaScript的灵活性来自动化缓慢、重复的工作流，并将它们组合成高效的构建管道。废话说完，接下来，都是干货啦！完全展开以后是... 查看详情

gulp的使用之gulpfile.js文件的配置

...么文件:gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且... 查看详情

前端自动化构建之gulp(代码片段)

...每次都是用脚手架搭好的文件，在无形中体验了一波前端自动化带来的方便。然后前一段时间才开始学习前端自动化。基本介绍gulp说得简单一点就是一个自动化把前端的各种工具以流的方式一步一步的按照设置的规定加载的一... 查看详情

关键前端知识点记录随笔

...配合各种插件做js压缩，css压缩，less编译，替代手工实现自动化工作。webpack是前端构建工具，称为模块打包机，webpack支持模块化；构建前端开发过程中常用的文件，如：js，css，html，img等；使用简单方便，自动化构建。webpack是... 查看详情

gulp常用插件之wiredep使用

更多gulp常用插件使用请访问：gulp常用插件汇总wiredep这是一款gulp插件，能够将js、css文件自动插入到html中。更多使用文档请点击访问wiredep工具官网。Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript... 查看详情

前端构建之--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-useref使用(代码片段)

...解释npminstall--save-devgulp-useref使用以下示例将解析HTML中的构建块，将其替换并传递这些文件。构建块内的资产也将被串联并通过流传递。vargulp=require('gulp'),useref=require('gulp-useref');gulp.task('default',function()returngulp.sr... 查看详情

gulp插件的使用方法

...件编译成css文件。除了考拉编译外，还可以通过gulp这个自动化构建工具实现less文件的编译。　　在用gulp 查看详情

经验之谈——gulp使用教程

...　　　gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且... 查看详情

gulp常用插件之gulp-uglify使用(代码片段)

更多gulp常用插件使用请访问：gulp常用插件汇总gulp-uglify这是一款使用UglifyJS缩小js文件。更多使用文档请点击访问gulp-uglify工具官网。安装一键安装不多解释npminstall--save-devgulp-uglify使用vargulp=require('gulp');varuglify=require('gul... 查看详情

gulp入门学习

一、gulp简介   gulp是一个自动化构建工具。在开发过工程中，能够使用gulp对项目进行自动构建，大大提高工作效率。二、安装gulp   在安装gulp之前先要确认已经正确安装了node.js，然后在项目根目录下安装gul... 查看详情

前端自动化之gulp

前题：1.安装好nodejs环境，或者nvm　　　2.安装npm包管理工具简介： 可以自动的将开发阶段的代码进行压缩、合并、编译、加密等处理，生成项目提交的代码。使用：gulpfile.js文件编写的api较少，只有5个，可查看api自行编写... 查看详情

angularjs开发app之准备工作3_gulp

写在前面的话：　　常见的自动构建工具有 grunt、gulp、webpack，把源码进行合并压缩，节省带宽等~一起来学习gulp的使用吧~三、gulp的使用(gulp中文网)：　　gulp的优点：基于流、任务化　　常用API:src、dest、watch、task、pipe（1... 查看详情

gulp的使用流程(代码片段)

GULP的使用流程Gulp是基于node.js的一个前端自动化构建工具，开发这可以使用它构建自动化工作流程（前端集成开发环境）。使用gulp你可以简化工作量，让你把重点放在功能的开发上，从而提高你的开发效率和工作质量。一、建... 查看详情