0

我正在努力让自己的gulp-watch行为随心所欲。这个小项目是从 Jade+SASS 以可重复的方式构建 HTML5 电子邮件模板的工具。目录结构如下：

.
├── Gulpfile.coffee
├── Gulpfile.js
├── build
│   ├── hello-world.html
│   └── styles
│       └── ink.css
├── node_modules
│   ├── ...snip...
├── package.json
└── source
    ├── hello-world.jade
    ├── layouts
    │   └── default.jade
    └── styles
        └── ink.scss

我的愿望清单是这样的：

  • 在样式或模板更改时构建所有模板。这是我做不到的
  • 不要有一个seaerate的“冷”启动，总是使用gulp增量构建。（这似乎有效）
  • 实时重新加载会重新加载浏览器，这很酷。（这个也是）

为简洁起见，以 CoffeeScript 表示法包含在下面Gulpfile，它主要基于文档增量重建，包括对完整文件集进行操作。

gulp      = require 'gulp'
inlineCss = require 'gulp-inline-css'
jade      = require 'gulp-jade'
marked    = require 'gulp-marked'
plumber   = require 'gulp-plumber'
rename    = require 'gulp-rename'
sass      = require 'gulp-sass'
cached    = require 'gulp-cached'
util      = require 'gulp-util'
watch     = require 'gulp-watch'
webserver = require 'gulp-webserver'

styleGlob              = "source/styles/*.scss"
templateAndLayouysGlob = "source/**/*.jade"
templateGlob           = "source/*.jade"

styleChangeHandler = (event) ->
  if event.type is "deleted"
    delete cached.caches.scripts[event.path]

templateChangeHandler = (event) ->
  if event.type is "deleted"
    delete cached.caches.templates[event.path]

gulp.task "styleWatcher", ->
  gulp.src(styleGlob)
    .pipe(cached('styles'))
    .pipe(watch(styleGlob))
    .pipe(sass())
    .pipe(gulp.dest("build/styles"))
    .on('error', util.log)

gulp.task "templateWatcher", ->
  gulp.src(templateGlob)
    .pipe(cached('templates'))
    .pipe(watch(templateGlob))
    .pipe(jade(pretty: true))
    .pipe(inlineCss())
    .pipe(gulp.dest("build/"))
    .on('error', util.log)

gulp.task 'webserver', ->
  buildPath = 'build/'
  gulp.src(buildPath)
    .pipe(webserver({
      livereload: true,
      directoryListing: {
        enable: true,
        path: buildPath
      },
      open: true
    }))

gulp.task "watch", ->
  styleWatcher = gulp.watch(styleGlob, ["styleWatcher"])
  styleWatcher.on 'change', styleChangeHandler

  templateWatcher = gulp.watch(templateGlob, ["templateWatcher"])
  templateWatcher.on 'change', templateChangeHandler

  # I would expect this to fire when something in build/styles/*.css
  # is updated by the style watcher?
  templateStyleWatcher = gulp.watch('build/styles/*.css', ["templateWatcher"])
  templateStyleWatcher.on 'change', templateChangeHandler

gulp.task "default", ["styleWatcher", "templateWatcher", "watch", "webserver"]

如果可能的话，并且我已经在 GNU Make 或类似工具中编写了这个观察程序，我可以选择表达它build/，并在它们所依赖的文件过时时依赖工具来重建这些文件。

我已经看到有许多gulp-<something about inlining>插件，但是它们都没有通过查看为更改而导入的路径来明确它们是否支持这种有条件的重新编译（我对此表示怀疑）。

鉴于我在系统编程方面的背景，我很可能以一种完全错误的方式接近 Javascript 构建工具。

4

0 回答 0