在Gulp中的使用插件进行文件操作

一、使用gulp-sass转换scss文件

先单独为node-sass配置镜像源

yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

因为在安装gulp-sass的时候，它内部会去安装node-sass，而node-sass是一个C++的模块，它内部会有对C++程序集的依赖，这些二进制的包需要通过国外的站点去下载，可能会下载不下来，所以我们通过淘宝的镜像源去单独为node-sass配置镜像源。

安装gulp-sass
yarn add gulp-sass --dev

使用gulp-sass

const { src, dest } = require("gulp")
const sass = require('gulp-sass')

const style = () => {
    return src('src/assets/styles/*.scss', { base: 'src' }) // base定义基准路径，我们设置为src，这样就会把src后面的目录结构保存下来
            .pipe(sass({outputStyle: "expanded"})) /* 基本上每个插件提供的都是一个函数，函数的调用结果会返回一个文件的转换流 */
            /* 注意：sass在运行的时候会忽略 _下划线开头的文件，它会认为这种文件都是我们在主文件中依赖的文件,就不会被转换
             sass转换的css文件每个样式的最后一个大括号不会空行，我们可以通过配置选项 outputStyle: "expanded" 使之空行（完全展开）*/
            .pipe(dest('dist'))
}

module.exports = {
    style
}

文件目录结构是这样的

运行yarn gulp style

成功将main.scss文件转换成main.css文件

二、使用gulp-babel转换js文件

安装

yarn add gulp-babel @babel/core @babel/preset-env --dev

使用

const { src, dest } = require("gulp")
const babel = require("gulp-babel")

const script = () => {
    return src('src/assets/scripts/*.js', { base: 'src' })
            .pipe(babel({ presets:['@babel/preset-env']})) // 如果这里没有配置presets的话，也是可以转换，但是转换前后几乎没什么区别，也可以通过babelrc文件去配置
            .pipe(dest('dist'))
}
module.exports = {
    script
}

运行

yarn gulp script

结果

转换前

// TODO: site logics

$(($) => {
  const $body = $('html, body')

  $('#scroll_top').on('click', () => {
    $body.animate({ scrollTop: 0 }, 600)
    return false
  })
})

转换后

"use strict";

// TODO: site logics
$(function ($) {
  var $body = $('html, body');
  $('#scroll_top').on('click', function () {
    $body.animate({
      scrollTop: 0
    }, 600);
    return false;
  });
});

三、使用模板引擎插件gulp-swig用于处理html文件

安装

yarn add gulp-swig --dev

使用

const { src, dest } = require("gulp")
const swig = require("gulp-swig")
const data = {
    str:"this is demo"
  }
  
const page = () => {
    return src('src/*.html', { base: 'src' })
            .pipe(swig({ data })) // 配置data，就是模板需要的数据，data: data简写为data
            .pipe(dest('dist'))
}

module.exports = {
    page
}

运行yarn gulp page

转换前

{{str}}

转换后

this is demo

四、使用gulp-imagemin插件转换图片和字体

安装cnpm i gulp-imagemin -D
由于gulp-imagemin内部也是依赖于一些通过C++完成的模块,只要是通过C++完成的模块，就涉及到二进制的程序集，这些程序集大都在github上下载，下载会比较慢，我之前使用yarn下载花了三分钟左右，而且有时候下载不下来，改用cnpm会更好。

使用

const { src, dest} = require("gulp")
const imagemin= require("gulp-imagemin")

const image = () => {
    return src('src/assets/images/**', { base: 'src' })
            .pipe(imagemin())
            .pipe(dest('dist'))
}

// 字体文件其实只需要拷贝过去就好了，但是里面也有svg文件，所以这里也用imagemin转换一下
const font = () => {
    return src('src/assets/fonts/**', { base: 'src' })
            .pipe(imagemin())
            .pipe(dest('dist'))
}

module.exports = {
    image,
    font
}

运行

yarn gulp image
yarn gulp font

命令行中会显示图片被压缩的百分比，并且这种压缩是无损的，只是清除了图片信息中的无用数据。

五、使用gulp-load-plugins避免重复引入插件动作

安装

yarn add gulp-load-plugins --dev

使用

// gulp-load-plugins导出的是一个方法，通过这个方法可以得到一个对象，所有的插件都会成为对象上的属性
// 例如 gulp-sass就是plugins.sass，如果是gulp-sass-sass这种类型，就是plugins.sassSass驼峰式
const loadPlugins = require("gulp-load-plugins")
const plugins = loadPlugins()

const style = () => {
    return src('src/assets/styles/*.scss', { base: 'src' }) // base定义基准路径，我们设置为src，这样就会把src后面的目录结构保存下来
            .pipe(plugins.sass({outputStyle: "expanded"}))
            .pipe(dest('dist'))
}

module.exports = {
    style
}

一样可以正常运行style任务

六、使用del插件清除文件

安装

yarn add del --dev

del插件不是gulp插件，但是可以在gulp中使用，主要是用来转换文件之前清除dist文件

const del = require("del")
const clean = () => {
    return del(['dist']) // 会返回一个promise对象，通过promise的状态结束任务
}
module.export = {
	clean
}

七、梳理代码

const { src, dest, parallel, series } = require("gulp")

const loadPlugins = require("gulp-load-plugins")
const plugins = loadPlugins()
const del = require("del")

const data = {
    str: 'this is demo'
  }

const style = () => {
    return src('src/assets/styles/*.scss', { base: 'src' }) 
            .pipe(plugins.sass({outputStyle: "expanded"}))
            .pipe(dest('dist'))
}

const script = () => {
    return src('src/assets/scripts/*.js', { base: 'src' })
            .pipe(plugins.babel({ presets:['@babel/preset-env']})) 
            .pipe(dest('dist'))
}

const page = () => {
    return src('src/*.html', { base: 'src' })
            .pipe(plugins.swig({ data })) 
            .pipe(dest('dist'))
}

const image = () => {
    return src('src/assets/images/**', { base: 'src' })
            .pipe(plugins.imagemin())
            .pipe(dest('dist'))
}

// 字体文件其实只需要拷贝过去就好了，但是里面也有svg文件，所以这里也用imagemin转换一下
const font = () => {
    return src('src/assets/fonts/**', { base: 'src' })
            .pipe(plugins.imagemin())
            .pipe(dest('dist'))
}

// 处理一些额外的文件
const extra = () => {
    return src('public/**', { base: 'public' })
            .pipe(dest('dist'))
}

// 转换文件前清除dist
const clean = () => {
    return del(['dist'])
}

// 组合上面的任务，因为这些任务并没有什么牵连，可以同时进行，所以使用parallel
/* 定义compile处理src目录下的文件 */
const compile = parallel(style, script, page, image, font)

// 定义build处理所有文件
// 因为我们要先删除，再生成，所以要用series串行执行任务
const build = series(clean, parallel(extra, compile))

module.exports = {
    build
}

执行yarn add build就能将src目录以及public目录的文件转换，转换前会清空dist文件