Gulp 手表工作一次

Question

我正在尝试让我的 gulp“监视”任务运行。现在我每次都必须从命令行运行 gulp（ps - 我在 Windows 7 上）。

我已经阅读了几篇类似的帖子，并且正在寻找语法错误。不幸的是，我的任何尝试都没有帮助。

var gulp = require('gulp');
var gutil = require('gulp-util');
var stylus = require('gulp-stylus');
var autoprefixer = require('autoprefixer-stylus');
var webpack = require('webpack');
var runSequence = require('run-sequence');
var del = require('del');

gulp.task('clean', function(cb) {
    return del (['build/*'], cb);
});

gulp.task('copy', function() {  });

gulp.task('images', function() {
    gulp.src(['client/images/**/*.{jpg,png}'])
    .pipe(gulp.dest('build/images'));
});

gulp.task('css', function() {
    gulp.src(['client/css/**/*.styl'])
    .pipe(stylus({
        use:
        [autoprefixer({browsers: ['last 2 versions', 'ie 10']})]
    }))
    .pipe(gulp.dest('build/css'));
});

gulp.task('js', function(cb) {
    webpack(require('./webpack.config.js'), function(err, stats)
        {
        if(err) throw new gutil.PluginError('webpack.build', err);
        gutil.log('[webpack:build]', stats.toString({
            colors: true
        }));
        });
});

gulp.task('build', function(cb) {
    runSequence('clean', ['copy', 'images', 'css', 'js'],
        function() {
            cb();
        });
});

gulp.task('watch', ['build'], function() {
    gulp.watch('client/**/*.styl', ['css']);
    gulp.watch('client/**/*.jsx', ['js']);
});

gulp.task('default', ['watch']);

我还使用“自动监视”功能对其进行了更新，但这也不起作用。

var gulp = require('gulp');
--> var autowatch = require('gulp-autowatch');
var gutil = require('gulp-util');
var stylus = require('gulp-stylus');
var autoprefixer = require('autoprefixer-stylus');
var webpack = require('webpack');
var runSequence = require('run-sequence');
var del = require('del');

gulp.task('clean', function(cb) {
    return del (['build/*'], cb);
});

gulp.task('copy', function() {  });

gulp.task('images', function() {
    gulp.src(['client/images/**/*.{jpg,png}'])
    .pipe(gulp.dest('build/images'));
});

gulp.task('css', function() {
    gulp.src(['client/css/**/*.styl'])
    .pipe(stylus({
        use:
        [autoprefixer({browsers: ['last 2 versions', 'ie 10']})]
    }))
    .pipe(gulp.dest('build/css'));
});

gulp.task('js', function(cb) {
    webpack(require('./webpack.config.js'), function(err, stats)
        {
        if(err) throw new gutil.PluginError('webpack.build', err);
        gutil.log('[webpack:build]', stats.toString({
            colors: true
        }));
        });
});

gulp.task('build', function(cb) {
    runSequence('clean', ['copy', 'images', 'css', 'js'],
        function() {
            cb();
        });
});

-->var paths = {
-->    images: 'client/**/*.{jpg,png}',
-->    css: 'client/**/*.styl',
-->    js: 'client/**/*.{js,jsx}',
-->};
-->
-->gulp.task('watch', ['build'], function() {
-->    autowatch(gulp, paths);
-->});

gulp.task('default', ['watch']);

知道我做错了什么吗？

Answer 1

我认为您需要指定正确的子文件夹。假设你分别使用 client/css 和 client/js 也许试试这个？

gulp.task('watch', ['build'], function() {
    gulp.watch('client/css/**/*.styl', ['css']);
    gulp.watch('client/js/**/*.jsx', ['js']);
});