在我们的开发中，我们经常会使用打包工具，未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。对css进行打包，在scss中，我们还经本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】常把模块放在一个单独的文件夹内，这样就会【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。有路径问题（这个问题本文暂时也不解决），转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net比如我们把scss文件放在src/sty未经授权，禁止复制转载。原创内容，盗版必究。le目录中，但是编译打包完之后的css放【版权所有，侵权必究】【版权所有，侵权必究】在dist目录下，这样就会导致原本样式中未经授权，禁止复制转载。【本文首发于唐霜的博客】的url路径在最终的css中不正确。本文著作权归作者所有，禁止商业用途转载。【转载请注明来源】就试图写一个插件来调整这个引用路径。

本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】【本文受版权保护】【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】

gulp的插件怎么写？原创内容，盗版必究。

著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】

gulp的插件，其实是放在pipe中作为本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net参数的函数，它处理的要么是stream要【原创不易，请尊重版权】原创内容，盗版必究。么是buffer，在我们这个场景里面，s【转载请注明来源】未经授权，禁止复制转载。tream就是所有的整个流程里面的信息，【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】buffer就是当前正在处理的这个文件的著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。信息，所以我们要处理的，是buffer，【转载请注明来源】【本文受版权保护】可以简单（而不正确）的理解为，一个buf本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。fer就对应一个文件。

【原创不易，请尊重版权】【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net

理解这点之后，在继续往下看。我们通过在p【版权所有，侵权必究】转载请注明出处：www.tangshuang.netipe中截获文件信息，包括文件的内容，通原创内容，盗版必究。【作者：唐霜】过我们自己的代码，修改内容或文件信息（比【版权所有，侵权必究】【原创内容，转载请注明出处】如文件名），把修改过的buffer返回给本文作者：唐霜，转载请注明出处。【本文受版权保护】pipe，这样就达到了我们gulp插件的【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】目的。

【版权所有，侵权必究】转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】【转载请注明来源】本文作者：唐霜，转载请注明出处。

基于这种思想，我写了一个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 = file.contents.toString()
        content = modify(content, file.path) || content
        file.contents = new Buffer(content)
        this.push(file)
        callback()
    })
}

上面就是专门用来修改文件内容的一个模块，本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。下面开始利用这个模块，撰写你自己的gul未经授权，禁止复制转载。【转载请注明来源】p插件：

【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net【本文受版权保护】

// replaceName.js
import modify from "./modifyStreamContent"
export default function() {
  return modify((content, filePath) => {
    content = content.replace("{{name}}", "my name")
    return content
  })
}

上面就是最最简单的一个gulp插件了，它转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】的作用是将文件内容里面的{{name}}【原创内容，转载请注明出处】【原创内容，转载请注明出处】替换为”my name著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net221;（第一个）。

转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。

接下来看下在gulpfile里面怎么使用【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。这个插件：

原创内容，盗版必究。原创内容，盗版必究。【原创不易，请尊重版权】

import rename from "./replaceName"
gulp.task("default", () => {
  gulp.src("my.md").pipe(rename()).pipe(gulp.dest("."))
})

如果在replaceName里面加入参数著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。，你还可以实现更负责的选项。

本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。

gulp编译scss【作者：唐霜】

未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net

写完scss之后，当然是想着把它转换为c【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】ss，放到浏览器下面去看看效果。但是不要【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net急，既然是我们用scss写的源码，所以不【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】需要一个可以修改的css，所以我们就mi【作者：唐霜】本文作者：唐霜，转载请注明出处。nify一下好了，而且生成一个sourc【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】emap文件方便调试吧。

转载请注明出处：www.tangshuang.net【作者：唐霜】本文版权归作者所有，未经授权不得转载。【作者：唐霜】本文作者：唐霜，转载请注明出处。

import sass from "gulp-sass"
import cssmin from "gulp-cssmin"
import sourcemaps from "gulp-sourcemaps"
gulp.task("scss", () => {
  gulp.src("src/style/*.scss")
  .pipe(sorucemaps.init())
  .pipe(sass())
  .pipe(cssmin())
  .pipe(sroucemaps.write("./"))
  .pipe(gulp.dest("dist"))
})

OK，这样当运行scss任务的时候，机会【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】把style目录下的scss文件进行编译【本文受版权保护】本文作者：唐霜，转载请注明出处。合并和压缩，在dist目录下会生成一个c【未经授权禁止转载】【原创内容，转载请注明出处】ss文件，当然是经过压缩的。注意，不要直【转载请注明来源】【原创不易，请尊重版权】接在style目录下相互引用。

转载请注明出处：www.tangshuang.net【未经授权禁止转载】转载请注明出处：www.tangshuang.net

调整css里面的url相对路径【访问 www.tangshuang.net 获取更多精彩内容】

【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。

为什么只调相对路径呢？因为绝对路径没有必【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net要调，撰写的时候如果把http都加进去了未经授权，禁止复制转载。【本文首发于唐霜的博客】，肯定是考虑从cdn使用图片，这种情况下【原创内容，转载请注明出处】【未经授权禁止转载】就没必要考虑我们本文的这个问题。但是如果【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】是我文章开头提到的那种情况，就有必要，举【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】一个例子：

著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】

// in src/style/icons.scss
.icon {
  background-image: url(../images/icons.png)
}

当我们进行上面的编译任务之后转载请注明出处：www.tangshuang.net

【本文受版权保护】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net【转载请注明来源】

// in dist/icons.css
.icon {
  background-image: url(../images/icons.png)
}

这就有问题了，url里面的图片根本找不到转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net，应该是

【原创内容，转载请注明出处】原创内容，盗版必究。未经授权，禁止复制转载。

background-image: url(../src/images/icons.png)

才对。因为在scss编译的时候，并没有对【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】里面的文件路径进行处理。我们现在要做的，【版权所有，侵权必究】【版权所有，侵权必究】就是写一个gulp插件，在scss编译之【本文首发于唐霜的博客】原创内容，盗版必究。前，对图片路径进行修正。

未经授权，禁止复制转载。【作者：唐霜】【转载请注明来源】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net

import {path} from "../loader"
import {modifyStreamContent} from "./index"
function matchAll(str, reg) {
  var res = []
  var match
  while(match = reg.exec(str)) {
    res.push(match)
  }
  return res
}
export default function AssetsRelativePath(distPath) {
  return modifyStreamContent((content, filePath) => {
    if(!distPath) { 
     return content
    }
    var matches = matchAll(content, /url\((\S+?)\)/gi)
    var currentDir = path.dirname(filePath)
    if(matches instanceof Array) {
      matches.forEach(match => {
        let url = match[1]
        // only relative path supported
        if(url.toString().substr(0, 1) !== ".") {
          return
        }
        let file = url.replace("'", "").replace('"', "")
        let originalPath = path.resolve(currentDir, file)
        let relative = path.relative(distPath, originalPath)
        let res = relative.replace(/\\/g, "/")
        content = content.replace(url, res)
      })
    }
    return content
  })
}

在gulpfile中这样去用：本文作者：唐霜，转载请注明出处。

转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】

import sass from "gulp-sass"
import cssmin from "gulp-cssmin"
import sourcemaps from "gulp-sourcemaps"
import AssetsRelativePath from "./AssetsRelativePath"
gulp.task("scss", () => {
  gulp.src("src/style/*.scss")
  .pipe(AssetsRelativePath("dist"))
  .pipe(sorucemaps.init())
  .pipe(sass())
  .pipe(cssmin())
  .pipe(sroucemaps.write("./"))
  .pipe(gulp.dest("dist"))
})

为什么要放在sass()前面呢？因为当s未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】ass()执行完毕之后，我们无法通过源文【本文受版权保护】【未经授权禁止转载】件的路径，找出与目标文件夹之间的相对路径【作者：唐霜】著作权归作者所有，禁止商业用途转载。。
未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。 这样就可以实现相对路径替换了。不过这个著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】方案还是有很多欠缺，主要是：

本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】【本文受版权保护】【版权所有】唐霜 www.tangshuang.net

1. 在scss中写url时，考虑的是当前写的【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net这个文件与图片之间的相对关系，而不是生成原创内容，盗版必究。本文作者：唐霜，转载请注明出处。的css文件与图片之间的相对路径。这一点【本文受版权保护】转载请注明出处：www.tangshuang.net其实也要从两面看，如果编写的时候就从后者【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net去考虑，那本文就没有必要去写了。但是如果【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。考虑的是编写的文件与图片之间的相对关系的【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。话，又要考虑生成文件与图片之间的路径合理【未经授权禁止转载】原创内容，盗版必究。性，比如上面我的例子中，dist里面的文【作者：唐霜】著作权归作者所有，禁止商业用途转载。件引用了src里面的图片，感觉不是很好，【原创内容，转载请注明出处】【原创不易，请尊重版权】最好是在dist同级目录中放置静态文件夹本文作者：唐霜，转载请注明出处。【作者：唐霜】，这样src和dist都是使用相同的一份本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】静态文件，更有利于发布。
【作者：唐霜】【原创内容，转载请注明出处】未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】
2. 本文的方法，只能处理gulp.src中接【本文受版权保护】【转载请注明来源】收的文件，不在这个匹配列表中的文件中的u【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。rl路径也无法处理，比如写一个_sett著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。ings.scss放到settings目【版权所有，侵权必究】【原创不易，请尊重版权】录下，因为没有被gulp.src到，所以【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net里面的路径也没有办法替换到。
【原创不易，请尊重版权】【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net

小结【转载请注明来源】

本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net

这篇文件只是给出了一个方案，由于欠缺还是原创内容，盗版必究。本文作者：唐霜，转载请注明出处。很大，所以也只能当做启发用的思考，它可以【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。帮助你思考怎么来写gulp，怎么通过gu【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。lp的buffer去修改输出的内容。有了【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】这些技巧，一旦你想到了新的方案，就可以更【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。好的去实践。

【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】

2017-01-24 12860 gulp, scss