gulp修改html资源路径,gulp编译scss时调整url引用路径

在我们的开发中，我们经常会使用打包工具，对css进行打包，在scss中，我们还经常把模块放在一个单独的文件夹内，这样就会有路径问题(这个问题本文暂时也不解决)，比如我们把scss文件放在src/style目录中，但是编译打包完之后的css放在dist目录下，这样就会导致原本样式中的url路径在最终的css中不正确。本文就试图写一个插件来调整这个引用路径。

gulp的插件怎么写？

gulp的插件，其实是放在pipe中作为参数的函数，它处理的要么是stream要么是buffer，在我们这个场景里面，stream就是所有的整个流程里面的信息，buffer就是当前正在处理的这个文件的信息，所以我们要处理的，是buffer，可以简单(而不正确)的理解为，一个buffer就对应一个文件。

理解这点之后，在继续往下看。我们通过在pipe中截获文件信息，包括文件的内容，通过我们自己的代码，修改内容或文件信息(比如文件名)，把修改过的buffer返回给pipe，这样就达到了我们gulp插件的目的。

基于这种思想，我写了一个gulp插件的模块，你如果以后要自己写，可以方便的使用这个模块：

// modifyStreamContent.js

import through from "through2"

import {log} from "../loader"

export default function modifyStreamContent(modify) {

return through.obj(function(file, endcoding, callback) {

if(file.isNull()) {

this.push(file)

return callback()

}

if(file.isStream()) {

log("streaming not supported", "error")

return callback()

}

var content =