Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Different behaviour when using watch? #55

Open
MarcelRobitaille opened this issue Jun 22, 2017 · 0 comments
Open

Different behaviour when using watch? #55

MarcelRobitaille opened this issue Jun 22, 2017 · 0 comments

Comments

@MarcelRobitaille
Copy link

I am having an issue where everything works fine when calling the task directly (gulp css) but when the task gets triggered by gulp.watch, it recompiles no matter what. Even if I just write the file and it doesn't change. Just writing the file doesn't update the timestamp so running the task from the command line doesn't trigger the recompile.

As you can see in this screenshot, writing global.scss at 1:27 triggers the task but running the task from the command line after that does not. Is there any difference behind the scenes when a task is triggered by gulp.watch?
image

Relevant file included into gulp:

const path = require('path')

const sassGraph = require('sass-graph')
const gutil = require('gulp-util')
const $ = require('gulp-load-plugins')()

const styles = [ 'global', 'dashboard', 'schedule', 'devices' ]
const tasks = []
const buildTasks = []

module.exports = gulp => {
  styles.map(style => {

    const file = `./source/css/${style}.scss`
    const files = Object.keys(sassGraph.parseFile(file)
      .filter(file => !file.startsWith(path.join(__dirname, '../node_modules/')))

    const task = `css-${style}`
    tasks.push(task)

    gulp.task(task, () => {
      return gulp.src(file)
        .pipe($.newer({ dest: `./public/css/${style}.css`, extra: files }))
        .pipe($.tap(() => gutil.log(`Recompiling '${gutil.colors.cyan(style)}'...`)))
        .pipe($.sourcemaps.init())
        .pipe($.sassGlob())
        .pipe($.sass().on('error', $.sass.logError))
        .pipe($.autoprefixer())
        .pipe($.sourcemaps.write('maps/'))
        .pipe(gulp.dest('public/css'))
        .pipe($.if(
          file => path.extname(file.path) === '.css',
          require('browser-sync').stream()
        ))
    })

    gulp.task(`watch-css-${style}`, () => gulp.watch(files, [ task ]))

    const buildTask = `build-css-${style}`
    buildTasks.push(buildTask)

    gulp.task(buildTask, () => {
      return gulp.src(`./source/css/${style}.scss`)
        .pipe($.sassGlob())
        .pipe($.sass())
        .pipe($.cssnano())
        .pipe($.autoprefixer())
        .pipe($.rev())
        .pipe($.dbust())
        .pipe(gulp.dest('build/css/'))
        .pipe($.gzip())
        .pipe(gulp.dest('build/css/'))
    })
  })

  gulp.task('css', tasks)
  gulp.task('build-css', buildTasks)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant