如何通过gulp-watch和gulp-less传递相对目标路径

时间:2014-11-17 20:58:09

标签: gulp gulp-watch gulp-less

所以我想观察对较少文件所做的更改,并让CSS的目标路径与更改文件较少的文件夹相同。

这是一般文件结构:

    root
    |
    site1
    |   |
    |   includes
    |   |   |
    |   |   site1-styles.less
    |   |   site1-style.css
    site2
    |   |
    |   includes
    |   |   |
    |   |   site2-style.less
    |   |   site2-style.css

这是我认为可行的方法,但我意识到路径可能没有意义,而且我不确定通过正确目的地的最佳方式。

    // Require
    //////////////////////
    var gulp = require('gulp'),
    less = require('gulp-less'),
    minifyCSS = require('gulp-minify-css'),
    prefix = require('gulp-autoprefixer'),


    // Styles
    //////////////////////
    gulp.task('less', function () {
    gulp.src(['*/includes/*.less'])
    .pipe(less())
    .pipe(minifyCSS())
    .pipe(prefix("last 2 version", "> 1%", "ie 8", "ie 7"))
    .pipe(gulp.dest('*/includes/'))
    });

    //Default
    //////////////////////
    gulp.task('default', function() {
    gulp.watch(['*/includes/*.less'], ['less']);
    });

由于

1 个答案:

答案 0 :(得分:1)

我猜你的gulp.dest shuld只是一个'。'所以gulp.src文件夹将被保留。

还要记住返回流或使用回调,否则当任务完成并且您可能遇到任务依赖性问题时,不会通知gulp。这不是你的情况,但无论如何它都是一种很好的做法。

// Styles
//////////////////////
gulp.task('less', function () {
    return gulp.src(['*/includes/*.less'])
        .pipe(less())
        .pipe(minifyCSS())
        .pipe(prefix("last 2 version", "> 1%", "ie 8", "ie 7"))
        .pipe(gulp.dest('.'));
});

顺便说一下,当你遇到这些路径问题时,我发现gulp-debug插件非常有用,所以你可以进行实验并验证发生了什么。