Question

我努力让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

我的愿望清单是：

在样式或模板更改时构建所有模板。 这是我无法做的
不要吃海水＆＃34;感冒＆＃34;开始，总是使用gulp增量构建。（这似乎有效）
实时重新加载会重新加载浏览器，这很酷。（这也是）

以下简要介绍了CoffeeScript表示法中的Gulpfile，它主要基于文档Incremental rebuilding, including operating on full file sets。

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构建工具。

Gulp手表，增量构建

0 个答案: