Gulp4.0构建html项目

最新推荐文章于 2024-08-26 12:26:03 发布

_El-切图仔

最新推荐文章于 2024-08-26 12:26:03 发布

阅读量1.6k

点赞数 1

文章标签： gulp构建项目

本文链接：https://blog.csdn.net/qq_36587420/article/details/89183022

版权

Gulp4.0 构建html+sass+js项目

Gulp介绍

Gulp使用了node.js的流控制系统，使其（Gulp）构建更快，因为它不需要将临时文件/文件夹写入磁盘。

Gulp允许你去指定你的源文件是哪些，然后用管道的方式传输你的源文件到一堆的插件中进行编译，最后得出你想要的结果。

我们要修改编译、合并或者压缩的文件都放在一起，然后通过管道流，管道流里面含有多种的插件，这些插件会按照你指定的操作顺序的方法进行对文件的操作，操作过后生成新的目标文件。

Gulp安装

Gulp是基于Node和NPM所以需要先安装node
当把node 及其npm配置好就可以开始gulp的安装

先全局安装gulp

$ npm install gulp -g

新建一个文件夹当做项目目录，在文件夹内打开命令行工具进行初始化

$ npm init

一路回车就好，如果需要配置git地址，项目描述等可自行输入在，这里不作介绍。

项目内安装gulp

$ npm install gulp --save-dev

当我们安装完成，在package.json中的devDependencies看到了有gulp。

gulp的一些常用的API

gulp.src(globs[, options])

读取并输出所有与给定的 glob（文件匹配符）或 glob 数组相匹配的文件。返回一个 Vinyl 文件的流（stream），以便通过管道传送（pipe）给插件处理。

gulp.src('src/js/*.js')
  .pipe(gulp.dest('dist/js')) ;

gulp.dest(path[, options])

接收 pipe 来的数据，并写入文件。它会重新输出所有数据，因此你可以将数据 pipe 到多个文件夹。指定的文件夹如果还不存在，将会被自动创建。

gulp.src('src/js/*.js')
  .pipe(gulp.dest('dist/js')) ;

gulp.symlink(folder[, options])

它的功能和 gulp.dest 与十分相似，但它会创建 symlink，而不是复制目录。

gulp.task([name,] fn)

这个方法可以定义一个任务，以便暴露给 Gulp 命令行工具（gulp-cli）以及 gulp.series、gulp.parallel 和 gulp.lastRun 方法；这个方法继承自 undertaker。

gulp.task(function someTask() {
  // Do stuff
  // 在这里干一些活
});

也可以获取一个已经注册的任务。

// script 是一个已经注册的任务函数
var script = gulp.task('script');

fn 参数

完成某个任务的具体操作的函数。通常它的形式是这样的：

function someTask() {
  return gulp.src(['some/glob/**/*.ext']).pipe(someplugin());
}
someTask.description = 'Does something';

gulp.task(someTask)

gulp.lastRun(taskName, [timeResolution])

返回指定任务在上一次成功运行时的时间戳。时间是任务开始的时间。如果任务还没有运行过，则返回 undefined.
假设有一个叫 “someTask” 的任务在 1426000004321 这个时间运行过：

gulp.lastRun('someTask', 1000) //将返回 1426000004000。

gulp.parallel(…tasks)

接受多个任务名或任务函数，返回这些任务或函数组合之后形成一个函数。
如果使用的是任务名的话，任务必须是已经注册过的。
当这个组合后的函数被执行时，它包含的各项任务或函数将会并行执行，即它们会同时启动并运行。只要有一个错误发生，所有任务的运行都将结束。

gulp.task('one', function(done) {
  // 在这里干一些活
  done();
});

gulp.task('two', function(done) {
  // 在这里干一些活
  done();
});

gulp.task('default', gulp.parallel('one', 'two', function(done) {
  // 在这里再多干一些活
  done();
}));

gulp.series(…tasks)

接受多个任务名或任务函数，返回这些任务或函数组合之后形成一个函数。
如果使用的是任务名的话，任务必须是已经注册过的。
当这个组合后的函数被执行时，它包含的各项任务或函数将会串行执行，即各项任务会等待它前面的任务完成后再运行。只要有一个错误发生，所有任务的运行都将结束。

gulp.task('one', function(done) {
  // 在这里干一些活
  done();
});

gulp.task('two', function(done) {
  // 在这里干一些活
  done();
});

gulp.task('default', gulp.series('one', 'two', function(done) {
  // 在这里再多干一些活
  done();
}));

gulp.watch(globs[, opts], fn)

第一个参数 globs 用于指定文件系统中的哪些文件会被监视；接下来的 options 参数是可选的，用于配置监视器；最后的 fn 参数是当文件变动时调用的任务函数。
返回一个 chokidar 监视器实例。

gulp.watch('js/**/*.js', gulp.parallel('concat', 'uglify'));

在上面的例子中，gulp.watch 会监视 js/ 目录下所有扩展名为 js 的文件。每当这些文件改动时，都会调用 gulp.parallel 所返回的函数。

gulp.tree(options)
返回所有任务的树形结构。这个方法继承自 undertaker。
例子：

gulp.task('one', function(done) {
  // do stuff
  // 在这里干一些活
  done();
});

gulp.task('two', function(done) {
  // do stuff
  // 在这里干一些活
  done();
});

gulp.task('three', function(done) {
  // do stuff
  // 在这里干一些活
  done();
});

gulp.task('four', gulp.series('one', 'two'));

gulp.task('five',
  gulp.series('four',
    gulp.parallel('three', function(done) {
      // do more stuff
      // 在这里再多干一些活
      done();
    })
  )
);

gulp.tree()
// output: [ 'one', 'two', 'three', 'four', 'five' ]

注意：gulp4.0是用series或parallel执行对应任务与之前的版本会不一样。

Gulp插件

压缩css（gulp-clean-css或gulp-cssnano，注意gulp-minify-css已经被废弃，不推荐使用）
Sass编译（gulp-sass）
压缩图片（gulp-imagemin）
压缩html（gulp-htmlmin）
压缩JS （gulp-uglify）
实时刷新（browser-sync、gulp-livereload）
處理通知（gulp-notify）
过滤未被修改过的文件（gulp-changed）
防止监视中断（gulp-plumber）
模块化开发使用（gulp-file-include）
有条件的执行任务（gulp-if）
字符串替换插件（gulp-replace）
忽略管道中的部分文件（gulp-ignore）
连接合并文件（gulp-concat）
删除（del / gulp-clean ）
串行场景，使用场景是：处理(压缩、合并等等)（run-sequence ）
本地代理（gulp-webserver、http-proxy-middleware）
把静态文件名改成hash的形式（gulp-rev ）
HTML打包环境设置（gulp-preprocess）
把webpack当做一个流运行（可以借此处理babel）（webpack-stream）
js打包环境设置（gulp-preprocess（需要webpack-stream））
雪碧图（gulp.spritesmith）
替换相对路径为CDN（gulp-prefix）
Sass使用环境变量（gulp-sass-variables）
打包文件添加版本号（gulp-rev-all或 gulp-rev）
添加版本号更改对应内容（gulp-rev-collector搭配gulp-rev使用）

想了解使用更多的插件可以点击这里
按照自己的需要安装需要的插件把***替换为需要安装的插件，想一并下载则用空格隔开就好

npm install --save-dev ***

Gulp构建

说了那么多API及其用到的插件，现在正式开始我们的项目构建。
注意：gulp4.0是用series或parallel执行对应任务与之前的版本会不一样。

创建目录

新建一个文件夹命名随意，我这里命名为（gulp-test）
在文件夹创建好以下文件作备用
在这里插入图片描述
具体文件作用下面会慢慢讲述。

安装依赖

全局安装gulp(这里用npm作包管理工具，若想用其他构建包工具具体命令可自行百度，大同小异。)

$ npm install --global gulp

进入到gulp-test目录下使用命令行工具进行初始化，一路回车就好，如果正式开发的时候具体内容描述、版本地址可自己配置写上。

npm init //初始化项目 
npm i gulp --save-dev //安装gulp依赖

打开gulpfile.js文件，引入gulp并测试是否成功。

var gulp = require('gulp'),

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
  console.log(111111);
  return 
});

控制台输入gulp这个文件看到结果如下图则成功。
在这里插入图片描述
这里留意一下上图中的两行红字，解决方法我就不详细说明了可以看看下面的这篇文章：

https://blog.csdn.net/qq_41208114/article/details/79109269

gulp-htmlmin（压缩html）

使用npm安装一下 gulp-htmlmin这个依赖

npm i  gulp-htmlmin --save-dev

gulpfile.js 先引入这个插件使用task创建对应任务

var gulp = require('gulp'),
htmlMin = require('gulp-htmlmin') //压缩html
gulp.task('htmlMin', 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
  };
  return gulp.src(['src/*.html', '!src/include/**.html'])
    .pipe(htmlMin(options))
    .pipe(gulp.dest('dev'))
});

gulp.src括号中的数组为需要处理的目录位置的文件
gulp.dest括号中的内容为在目录下创建dev文件夹存放处理好的文件

打开src/index.html输入一下内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>gulp-test</title>
</head>
<body>
  <div>内容</div>
</body>
</html>

在控制台执行 gulp htmlMin (htmlMin为上面gulp.task中的任务名)，目录出现dev/index.html则成功.

gulp-sass-variables(sass配置环境变量)

安装

npm install gulp-sass-variables --save-dev

gulpfile.js

var gulp = require('gulp'),
    argv = require('yargs').argv,
    sassVariables = require('gulp-sass-variables'),
    sass = require('gulp-sass');
 
// Compile css
gulp.task('css', function () {
  return gulp.src('./src/scss/master.scss')
             .pipe(sassVariables({
               $env: argv.production ? 'production' : 'development'
             }))
             .pipe(sass({outputStyle:'compressed'}))
             .pipe(gulp.dest('./dist/css'))
});

nested（默认输出）
在这里插入图片描述
master.scss

$env: 'development' !default;
$path: '/dev/path/' !default;
 
@if($env == 'production') {
  $path: '/prod/path';
}

gulp-file-include（模块化）

使用npm安装一下 gulp-htmlmin这个依赖

npm i gulp-file-include --save-dev

gulpfile.js 引入这个插件我们在上面原有的htmlMin的任务中增加对应的通道pipe。

var gulp = require('gulp'),
htmlMin = require('gulp-htmlmin'), //压缩html
fileinclude = require('gulp-file-include'); //模块化

gulp.task('htmlMin', 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
  };
  return gulp.src(['src/*.html', '!src/include/**.html'])
    .pipe(fileinclude({
      prefix: '@', //引用符号
      basepath: './src/include', //引用文件路径
      indent: true //保留文件的缩进
    }))
    .pipe(htmlMin(options))
    .pipe(gulp.dest('dev'))
});

在src/include目录下我们创建header.html文件随便写入一些内容
在这里插入图片描述
在index.html引入它，在控制台再执行一下gulp任务即可。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>gulp-test</title>
</head>
<body>
  @include('header.html') <!-- 引入模块 -->
  <div>内容</div>
</body>
</html>

在控制台执行gulp htmlMin ,在dev文件夹下的index就会看到有include中的内容了。

gulp-changed(只传递修改过的文件)

安装依赖

npm i gulp-changed --save-dev

gulpfile.js引入并增加对应的管道

var gulp = require('gulp'),
htmlMin = require('gulp-htmlmin'), //压缩html
fileinclude = require('gulp-file-include'), //模块化
changed = require('gulp-changed'); //检查改变状态

gulp.task('htmlMin', 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
  };
  gulp.src(['src/*.html', '!src/include/**.html'])
    .pipe(changed('dev'))
    .pipe(fileinclude({
      prefix: '@',//引用符号
      basepath: './src/include', //引用文件路径
      indent: true //保留文件的缩进
    }))
    .pipe(htmlMin(options))
    .pipe(gulp.dest('dev'))
});

默认情况下，每次运行时候所有的文件都会传递并通过整个管道。通过使用 gulp-changed 可以只让更改过的文件传递过管道。这可以大大加快连续多次的运行，在开发过程中非常有用。

browser-sync（浏览器同步测试工具）+del(删除) + path(路径)

描述：让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。更神奇的是您在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器和设备中，这一切还可以通过可视化界面来控制。
安装依赖

npm i browser-sync path del --save-dev

gulpfile.js引入并增加对应的管道

var gulp = require('gulp'),
    htmlMin = require('gulp-htmlmin'), //压缩html
    fileinclude = require('gulp-file-include'), //模块化
    changed = require('gulp-changed'), //检查改变状态
    browserSync = require('browser-sync').create(),
    del = require('del'),
    gulpPath= require('path');

gulp.task('htmlMin', 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
  };
  return gulp.src(['src/*.html', '!src/include/**.html'])
    .pipe(changed('dev'))
    .pipe(fileinclude({
      prefix: '@',//引用符号
      basepath: './src/include', //引用文件路径
      indent: true //保留文件的缩进
    }))
    .pipe(htmlMin(options))
    .pipe(gulp.dest('dev'))
    .pipe(browserSync.reload({ //内容更改则触发reload
      stream: true
    }));
});

// 监听任务
gulp.task('watch', function () {
  // 建立浏览器自动刷新服务器
  browserSync.init({
    server: {
      // livereload: true,
      baseDir: "dev" // 设置服务器的根目录
    },
    notify: false, //禁用浏览器的通知元素
    port: 3000,
  });

  var watchHtml = gulp.watch('src/**/*.html', gulp.series('htmlMin'));

  watchHtml.on('unlink', function(path) {
    del('dev/' + gulpPath.basename(path));
  });
});
gulp.task('default', gulp.series('watch'));//默认执行

在控制台执行gulp
这时候当你更改文件的时候对应的页面会及时更新不需手动刷新。
这里会用到 gulp.watch监听方法，具体事用上面已经提出。
注意：gulp4.0是用series或parallel执行对应任务与之前的版本会不一样。

gulp-plumber（能夠在我们把程式错误改回來后，继续做监看的动作）

安装依赖

npm i gulp-plumber path del --save-dev

gulpfile.js引入并增加对应的管道

var gulp = require('gulp'),
    htmlMin = require('gulp-htmlmin'), //压缩html
    fileinclude = require('gulp-file-include'), //模块化
    changed = require('gulp-changed'), //检查改变状态
    browserSync = require('browser-sync').create(),
    del = require('del'),
    gulpPath= require('path'),
    plumber = require('gulp-plumber');
    //在htmlMin任务中添加对应管道
    gulp.task('htmlMin', 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
	  };
	  return gulp.src(['src/*.html', '!src/include/**.html'])
	    .pipe(changed('dev'))
	    .pipe(plumber())  //这里添加plumber 
	    .pipe(fileinclude({
	      prefix: '@',//引用符号
	      basepath: './src/include', //引用文件路径
	      indent: true //保留文件的缩进
	    }))
	    .pipe(htmlMin(options))
	    .pipe(gulp.dest('dev'))
	    .pipe(browserSync.reload({
	      stream: true
      	})
      );
	});

重新启动一下服务，在控制台执行gulp

gulp-uglify（js压缩）

安装依赖

$ npm i --save-dev gulp-uglify

gulpfile.js引入并增加处理js的任务

//引入
var gulp = require('gulp'),
    htmlMin = require('gulp-htmlmin'), //压缩html
    fileinclude = require('gulp-file-include'), //模块化
    changed = require('gulp-changed'), //检查改变状态
    browserSync = require('browser-sync').create(),  
    del = require('del'),
    gulpPath= require('path'),
    plumber = require('gulp-plumber'),
    uglify = require('gulp-uglify');
//创建任务
gulp.task('uglifyJs', function () {
  return gulp.src(['src/js/**/*.js'])
    .pipe(changed('dev/js/**/'))
    .pipe(plumber())
    .pipe(uglify({
            compress: {
                warnings: false,
                drop_console: true,  // 过滤 console
                drop_debugger: true  // 过滤 debugger
            }
        })) //加入uglify()的处理
    .pipe(gulp.dest('dev/js'))
    .pipe(browserSync.reload({
      stream: true
    }));
});
//增加js的监听，执行任务
// 监听任务
gulp.task('watch', function () {
  
  // 建立浏览器自动刷新服务器
  browserSync.init({
    server: {
      // livereload: true,
      baseDir: "dev" // 设置服务器的根目录
    },
    notify: false, //禁用浏览器的通知元素
    port: 3000,
  });

  var watchHtml = gulp.watch('src/**/*.html', gulp.series('htmlMin'));
  var watchJs = gulp.watch('src/js/**/*.js', gulp.series('uglifyJs'));
  
  watchHtml.on('unlink', function(path) {
    del('dev/' + gulpPath.basename(path));
  });
  watchJs.on('unlink', function(path) {
    del('dev/js/**/' + gulpPath.basename(path));
  });
});
gulp.task('default', gulp.series('htmlMin','uglifyJs','watch'));//默认执行

创建js文件并测试
在这里插入图片描述
我们在scr/j下创建一个index.js并写入下面的代码

console.log('测试')

在index.html中引入这个文件
控制台执行一下gulp
控制台看到输出测试则成功
在这里插入图片描述

gulp-clean-css（压缩css文件）

安装依赖

$ npm i --save-dev gulp-clean-css

gulpfile.js引入并增加处理css的任务
注意如果使用了sass的小伙伴可以不需要使用该组件，因为sass自带了压缩的功能

//引入
var gulp = require('gulp'),
    htmlMin = require('gulp-htmlmin'), //压缩html
    fileinclude = require('gulp-file-include'), //模块化
    changed = require('gulp-changed'), //检查改变状态
    browserSync = require('browser-sync').create(),  
    del = require('del'),
    gulpPath = require('path'),
    plumber = require('gulp-plumber'),
    uglify = require('gulp-uglify'),
    cleanCSS = require('gulp-clean-css');
//创建任务
gulp.task('css', function () {
  return gulp.src('src/styles/*.css')
    .pipe(changed('dev/css'))
    .pipe(plumber())
    // .pipe(sass())
    .pipe(cleanCSS())
    // cleanCSS({
    //   advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
    //   compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
    //   keepBreaks: true,//类型：Boolean 默认：false [是否保留换行]
    //   keepSpecialComments: '*'
    //   //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
    // })
    .pipe(gulp.dest('dev/css'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

//增加css的监听，执行任务
// 监听任务


// 监听任务
gulp.task('watch', function () {
  
  // 建立浏览器自动刷新服务器
  browserSync.init({
    server: {
      // livereload: true,
      baseDir: "dev" // 设置服务器的根目录
    },
    notify: false, //禁用浏览器的通知元素
    port: 3000,
  });

  var watchHtml = gulp.watch('src/**/*.html', gulp.series('htmlMin'));
  var watchJs = gulp.watch('src/js/**/*.js', gulp.series('uglifyJs'));
  var watchCss = gulp.watch('src/styles/*.css',  gulp.series('css'));
  
  watchHtml.on('unlink', function(path) {
    del('dev/' + gulpPath.basename(path));
  });
  watchJs.on('unlink', function(path) {
    del('dev/js/**/' + gulpPath.basename(path));
  });
  watchCss.on('unlink', function(path) {
    var cssName = gulpPath.basename(path).split('.css')[0]
    del('dev/css/' + cssName + '.css');
  });
});
gulp.task('default', gulp.series('htmlMin','uglifyJs','css','watch'));//默认执行

在src/styles目录下创建index.css写入一些样式代码并在index.html引入（注意引入的目录是dev对应的目录，不是开发中的目录）
控制台执行gulp跑起看看有效果则成功。

index.css

*{ 
  padding: 0;
  margin: 0;
}
body{
  background: wheat;
}

使用sass开发

安装

$ npm i --save-dev gulp-sass

gulpfile.js引入并增加对应的管道

var gulp = require('gulp'),
    htmlMin = require('gulp-htmlmin'), //压缩html
    fileinclude = require('gulp-file-include'), //模块化
    changed = require('gulp-changed'), //检查改变状态
    browserSync = require('browser-sync').create(),  
    del = require('del'),
    gulpPath = require('path'),
    plumber = require('gulp-plumber'),
    uglify = require('gulp-uglify'),
    cleanCSS = require('gulp-clean-css'),
    sass = require('gulp-sass');
//把css任务更改一下
gulp.task('sass', function () { //css改名为sass 这个看你喜欢不一定要改
  return gulp.src('src/styles/*.scss') //css文件后缀改为scss 这个是必须的。
    .pipe(changed('dev/css'))
    .pipe(plumber())
    .pipe(sass()) //增加这行
    .pipe(cleanCSS())
    // cleanCSS({
    //   advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
    //   compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
    //   keepBreaks: true,//类型：Boolean 默认：false [是否保留换行]
    //   keepSpecialComments: '*'
    //   //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
    // })
    .pipe(gulp.dest('dev/css'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

//监听任务也要更改
var watchCss = gulp.watch('src/styles/*.scss',  gulp.series('sass')); //这一块的监听需要把后缀改为scss
watchCss.on('unlink', function(path) {
    var cssName = gulpPath.basename(path).split('.scss')[0]
    del('dev/css/' + cssName + '.css');
  });
  gulp.task('default', gulp.series('htmlMin','uglifyJs','sass','watch'));//默认执行 这里的sass是对应上面你命名的任务如果是css 就是css

在styles目录下创建index.scss 写上一些样式，
控制台执行gulp有对应样式则成功。

gulp-imagemin(压缩图片)和gulp-cache(只处理修改的内容)

安装
压缩图片时比较耗时，在很多情况下我们只修改了某些图片，没有必要压缩所有图片，使用”gulp-cache”只压缩修改的图片

$ npm i gulp-imagemin gulp-cache --save-dev

使用
gulpfile.js

//引入
  var  imagemin = require('gulp-imagemin'),
    cache = require('gulp-cache');
//创建
gulp.task('Imagemin', function () {
  return gulp.src('src/images/*.{png,jpg,gif,jpeg,ico}')//后缀都用小写，不然不识别
      .pipe(
        cache(
          imagemin({
            optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
          })
        )
      )
      .pipe(gulp.dest('dev/images'));
});
//监听及使用
gulp.task('watch', function () {
  
  // 建立浏览器自动刷新服务器
  browserSync.init({
    server: {
      // livereload: true,
      baseDir: "dev" // 设置服务器的根目录
    },
    notify: false, //禁用浏览器的通知元素
    port: 3000,
  });

  var watchHtml = gulp.watch('src/**/*.html', gulp.series('htmlMin'));
  var watchJs = gulp.watch('src/js/**/*.js', gulp.series('uglifyJs'));
  var watchCss = gulp.watch('src/styles/*.scss',  gulp.series('sass'));
  var watchImg = gulp.watch('src/images/**/*', gulp.series('Imagemin'));
  
  watchHtml.on('unlink', function(path) {
    del('dev/' + gulpPath.basename(path));
  });
  watchJs.on('unlink', function(path) {
    del('dev/js/**/' + gulpPath.basename(path));
  });
  watchCss.on('unlink', function(path) {
    var cssName = gulpPath.basename(path).split('.scss')[0]
    del('dev/css/' + cssName + '.css');
  });
  watchImg.on('unlink', function(path) {
    del('dev/images/**/' + gulpPath.basename(path));
  });
});

gulp.task('default', gulp.series('clean', 'uglifyJs', 'sass', 'htmlMin', 'Imagemin','watch'));//默认执行

gulp-webserve（服务器代理）

描述：当你的项目使用axios或者ajax想使用代理的时候可以使用该插件实现
安装

$ npm i gulp-webserver --save-dev

let webserver = require('gulp-webserver');
gulp.task('webserver',()=>{
	gulp.src('dist')//以哪个文件夹作为根服务器
	.pipe(webserver({
		livereload:true,//热部署，是否可以自动刷新
//		https:true,//默认是http 需要与请求接口协议一致
		port: 3000,//端口
		host: 'localhost',//域名
		proxies:[
			{
				source:'/api',//随便起，相当于你要请求接口的替换名 请求时就用这个名字
				target:'http://*****' //要请求的接口
			}
		]
	}))
})

http-proxy-middleware（服务器代理）

$ npm i http-proxy-middleware --save-dev

var proxyMiddleware = require('http-proxy-middleware');
var middleware = proxyMiddleware.createProxyMiddleware('/api', {
    target: '代理地址',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '' 
    },
    logLevel: 'debug'
});

//在监听任务内创建浏览器自动刷新服务
gulp.task('watch', function () {
  // 建立浏览器自动刷新服务器
  browserSync.init({
    server: {
      // livereload: true,
      baseDir: "dev", // 设置服务器的根目录
      middleware: middleware
    },
    notify: false, //禁用浏览器的通知元素
    port: 4000,
  });
  
  .....
});

gulp-preprocess(打包环境配置)

$ npm i gulp-preprocess --save-dev

//gulpfile.js
const env = process.env.NODE_ENV
var preprocess = require('gulp-preprocess'),
let target = 'dev'
switch (env) {
  case 'prod':
    target = 'dist'
    break;
  case 'test':
    target = 'test'
    break;
  default:
    target = 'dev'
}
.pipe(preprocess({ //管道的写法 放在htmlMin任务中
        context: {
          // 此处可接受来自调用命令的 NODE_ENV 参数，默认为 development 开发测试环境
          NODE_ENV: target
        }
      }))

<!--index.html-->
<head>
  <title>Your App</title>

  <!-- @if NODE_ENV!='production' -->
    <header>You're on dev!</header>
    <!-- @endif -->

    <!-- @if NODE_ENV='production' -->
    <script src="some/production/javascript.js"></script>
    <!-- @endif -->
</head>
<body>
  <!-- @ifdef DEBUG -->
  <h1>Debugging mode - <!-- @echo RELEASE_TAG --> </h1>
  <!-- @endif -->
  <!-- 当你想根据配置环境按需引入不同的js或者css可以像下面这样写,同理图片也可以 -->
  
    <script src=" /assets/<!-- @echo ENV -->/a.js"></script>
</body>

webpack-stream和preprocess-loader(babel处理及js环境变量)

$ npm i webpack-stream preprocess-loader --save-dev

创建webpack.config文件在根目录写入下面内容

var path = require('path')

module.exports = {
  mode: 'development',
  devtool: false,
  performance: {
    // hints: false,
    maxEntrypointSize: 700000,
    maxAssetSize: 700000
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
          presets: ['@babel/preset-env'],
          plugins: [ // 使用到的插件
            "syntax-dynamic-import",
            "@babel/plugin-transform-runtime",
            "@babel/plugin-transform-modules-commonjs",
          ]
        }
      }
    },
    {
      test: /\.js$/,
      use: [
        { // preprocess-loader处理js的环境变量
          loader: 'preprocess-loader',
          options: {
            // 填写变量
            NODE_ENV: process.env.NODE_ENV,
            ppOptions: {
              type: 'js'
            }
          }
        }
      ]
    }]
  },
  resolve: { // 引用简写
    alias: {
      "utils": path.resolve(__dirname, "src/js/utils/"),
      "json": path.resolve(__dirname, "src/json/")
    }
  }
}

//gulpfile.js
 var gulpWebpack = require('webpack-stream'),
  webpackConfig = require('./webpack.config'),

//在处理js的task中加入该项 
gulp.src(['src/js/**/**/*.js', '!src/js/lib/**/*.js'])
      .pipe(plumber())
      .pipe(gulpWebpack(webpackConfig))
      .pipe(uglify({
              compress: {
                  drop_console: true,  // 过滤 console
                  drop_debugger: true  // 过滤 debugger
              }
            })) //加入uglify()的处理
      .pipe(gulp.dest(`dev/js`))

最后在需要用到环境变量的js中加入/* @echo NODE_ENV */即可，下面的一个js是我存放变量的地方，其中的api请求会根据打包环境分别打包对应的请求地址。


// 常量
const env = '/* @echo NODE_ENV */'

export default {
  // 版本号
  VERSION: '1.0.0',
  API_KEY: env == 'prod' ? 'asdfghg' : '123456',
  env,
  baseUrl: env=='prod' ? 'https://www.abcde.com'  : env == 'test' ? 'http://test.com' : '/api',

}

补充： 这里也可以不用uglify做js压缩，直接在webpack压缩，打包的速度会更快，需要安装terser-webpack-plugin处理es6的代码

$ npm install terser-webpack-plugin --save-dev

在webpack.config文件中加入optimization选项

optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
      terserOptions: {
        compress: {
            drop_console: true,  // 过滤 console
            drop_debugger: true,  // 过滤 debugger
        }
      }
    })],
  },

gulp.spritesmith（生成雪碧图）

$ npm i gulp.spritesmith --save-dev

var spritesmith = require('gulp.spritesmith')
gulp.task('sprite',function(){
   return gulp.src('src/images/icons/*.png')  //合成雪碧图的图片文件在images文件夹里，*表示所有png图片
      .pipe(spritesmith({
          imgName: 'sprite.png',  //合成后的图片命名
          cssName: 'sprite.css',  //合成后的图标样式
          padding: 5,  //雪碧图中两图片的间距
          algorithm: 'binary-tree',  //分为top-down、left-right、diagonal、alt-diagonal、binary-tree（可实际操作查看区别）
          cssTemplate: function (data) {
            var arr=[];
            data.sprites.forEach(function(sprite) {
              arr.push(".icon-"+sprite.name+
              "{" + "background-image: url('"+sprite.escaped_image+"');"+
              "background-size:"+(parseFloat(sprite.px.total_width) * 0.01)+"rem "+(parseFloat(sprite.px.total_height) * 0.01)+"rem;"+
              "background-position: "+(parseFloat(sprite.px.offset_x) * 0.01)+"rem "+(parseFloat(sprite.px.offset_y) * 0.01)+"rem;"+
              "width:"+(parseFloat(sprite.px.width) * 0.01)+"rem;"+
              "height:"+(parseFloat(sprite.px.height) * 0.01)+"rem;"+
              "}\n"); 
              //0.01这个值是看你设计稿跟你自己设定的rem单位换算出来的
              //我这里定义的rem是100vw / 7.5 设计稿是750的
            });
            return arr.join("");
          }
      }))
      .pipe(gulp.dest(`${target}/css`)); // 图片、样式输出到该文件夹
      //注意这里处理了雪碧图后 压缩图片的任务需要剔除掉该目录 不需要去处理

});

gulp-prefix (替换cdn)

直接上官网的例子

<!-- html -->
<html>
  <head>
    <link href="http://cdnjs.com/some-library.css">
    <link href="css/stylesheets.css">
  </head>
  <body>
    <img src="/images/myImage.jpg"/>
    <script src="//cdnjs.com/some-library.js"></script> 
    <script src="js/scripts.js"></script> 
    <script src="{{ignore_me_i_am_mustache}}"></script> 
  </body>
</html>

//gulpfile.js
var gulp = require('gulp'),
    prefix = require('gulp-prefix');
 
gulp.task('prefix', function(){
  var prefixUrl = "http://mydomain.com/assets";
 
  gulp.src('index.html')
    .pipe(prefix(prefixUrl, null, '{{'))
    .pipe(gulp.dest('build'));
});

输出

<html>
  <head>
    <link href="http://cdnjs.com/some-library.css">
    <link href="http://mydomain.com/assets/css/stylesheets.css">
  </head>
  <body>
    <img src="http://mydomain.com/assets/images/myImage.jpg"/>
    <script src="//cdnjs.com/some-library.js"></script> 
    <script src="http://mydomain.com/assets/js/scripts.js"></script> 
    <script src="{{ignore_me_i_am_mustache}}"></script> 
  </body>
</html>

gulp-rev、gulp-rev-collector（文件加上版本号)

npm install --save-dev gulp-rev gulp-rev-collector

var gulp = require("gulp");
var rev = require('gulp-rev'),//对文件名加MD5后缀
  	revCollector = require('gulp-rev-collector'),//路径替换
 
gulp.task("css", function () {
  gulp.src('src/styles/**/*.css')
  	  .pipe(rev()) //文件名加MD5后缀
      .pipe(gulp.dest(`dev/css`)) //输出到对应目录
      .pipe(rev.manifest('rev-css-manifest.json')) //生成一个rev-manifest.json
      .pipe(gulp.dest(`dev/rev`)) 保存到 rev 目录内
});

//使用rev替换成md5文件名，这里包括html和css的资源文件也一起
gulp.task('rev', function() {
  //html
  return gulp.src([`dev/rev/**/*.json`,`dev/**/*.html`])
      .pipe(revCollector({replaceReved:true }))
      .pipe(gulp.dest('dev'));
});

gulp-clean(删除文件)

描述：删除文件及文件夹，在执行打包的时候，一般都需要先清理目标文件夹，以保证每次打包时，都是最新的文件。
安装

$ npm i gulp-clean --save-dev

gulpfile.js引入并增加对应的任务

//引入
var gulp = require('gulp'),
    htmlMin = require('gulp-htmlmin'), //压缩html
    fileinclude = require('gulp-file-include'), //模块化
    changed = require('gulp-changed'), //检查改变状态
    browserSync = require('browser-sync').create(),  
    del = require('del'),
    gulpPath = require('path'),
    plumber = require('gulp-plumber'),
    uglify = require('gulp-uglify'),
    cleanCSS = require('gulp-clean-css'),
    sass = require('gulp-sass'),
    imagemin = require('gulp-imagemin'),
    cache = require('gulp-cache'),
    clean = require('gulp-clean');
//创建
gulp.task("clean", function () {
  return gulp.src('dev')
    .pipe(clean());
})
//使用
gulp.task('default', gulp.series('clean', gulp.parallel('uglifyJs', 'sass', 'htmlMin', 'Imagemin',),'watch'));//默认执行

注意区分gulp.series和gulp.parallel的使用，上面有详细API说明。这里这样写的意义是有可能会出现一种情况（其他文件处理速度快的已经处理完了，然后clean最后才执行，会把前面处理完的文件删掉，所以要用到gulp.parallel），gulp4.0一下的版本（现在多数用3.9.1）可以使用run-sequence

到这里基本可以开始你的项目开发了，贴一下packjson的插件版本

  "devDependencies": {
    "browser-sync": "^2.26.7",
    "del": "^5.1.0",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-cache": "^1.1.3",
    "gulp-changed": "^4.0.2",
    "gulp-clean": "^0.4.0",
    "gulp-clean-css": "^4.2.0",
    "gulp-cdn": "^1.1.3",
    "gulp-file-include": "^2.1.1",
    "gulp-htmlmin": "^5.0.1",
    "gulp-imagemin": "^6.0.0",
    "gulp-plumber": "^1.2.1",
    "gulp-sass": "^4.0.2",
    "gulp-uglify": "^3.0.2",
    "path": "^0.12.7",
    
    "@babel/core": "^7.8.6",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.8.6",
    "axios": "^0.19.2",
    "babel-loader": "^8.0.6",
    "babel-plugin-module-resolver": "^4.0.0",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "browser-sync": "^2.26.7",
    "core-js": "^3.3.2",
    "cross-env": "^7.0.1",
    "gulp-preprocess": "^3.0.3",
    "gulp.spritesmith": "^6.11.0",
    "http-proxy-middleware": "^1.0.2",
    "preprocess-loader": "^0.3.0",
    "webpack-stream": "^5.2.1"
  }