关于gulp中“流”的理解问题

gulp中处理任务时,我们经常说到“流” 这个概念,

如下图所示,对于这样的一个流处理任务, 我的理解是:

处理1: 流入css源文件(假设index.css),经过 autoprefixer 处理,流出 prefix_index.css

(ps: 第二步我就有点迷糊了,强行理解解释,也说的通)
处理2: 流入 prefix_index.css, 经过 sourcemaps 的处理,流出 pre_index.css(对,我觉的文件没变化),但同时也应该多流出了个sourcesmap有关文件(假设为 map.xxx(大致理解? )

处理3: 流入 pre_index.css 和 map.xxx 文件, 写如文件 map.xxx, 流出pre_index.css

处理4: 流入prefixer_index.css 写入到指定文件夹,流出 prefixer_index.css(文件不变)

图片描述


请教各位:

  1. 我的理解大致正确么( 大致大致? )
  2. 还有第二步有点疑惑,一个已经被autoprefixer 处理完毕 过后的文件 prefix_index.css, ,,sourcemaps是如何得出对应的关系,因为我觉得是边处理边写入对应关系才对。
阅读 3.1k
2 个回答

大致理解正确。
第二步,其实就是想用autoprefixer之后再使用sourcemap,sourcemap其实只是单独的一步处理,其作用是记录压缩代码对应位置,以便于之后转换编译混淆压缩后的代码。

代码写的就不对,这样写根本无法得到正确的sourcemap
postcss那一行应该放到init与write中间
autoprefixer中有对gulp-sourcemaps的支持,写在init与write之间的调用的模块会告诉gulp-sourcemaps对文件进行了如何的改变
(就是说如果写在init与write之间的调用的模块不支持gulp-sroucemaps,就无法生成正确的sourcemap)

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题