Gulp 任务链答案

【问题标题】：Gulp tasks chainingGulp 任务链
【发布时间】：2015-04-29 14:27:38
【问题描述】：

我正在使用 gulp 编译一些 .less 文件并通过 live-reload 在浏览器中注入更改。

这是我最初创建的任务：

var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');
var livereload = require('gulp-livereload');
var path = require('path');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer-core');
var mqpacker = require('css-mqpacker');
var csswring = require('csswring');

gulp.task('less', function() {
  var processors = [
    autoprefixer({browsers: ["last 2 version", "> 1%", "ie 9", "ie 8", "ie 7", "ios 6"]}),
    mqpacker,
    csswring({
      preserveHacks: true,
      removeAllComments: true
    })
  ];
  gulp.src('./css/style.less')  // only compile the entry file
  .pipe(plumber())
  .pipe(less({
    paths: ['./css/'],
  } ))
  .pipe(postcss(processors))
  .pipe(plumber.stop())
  .pipe(gulp.dest('./css/'))
  .pipe(livereload());
});
gulp.task('watch', function() {
  gulp.watch('./**/*.less', ['less']);  // Watch all the .less files, then run the less task
});

gulp.task('default', ['watch']); // Default will run the 'entry' watch task

我创建了另一个 gulp 任务来执行相同的任务，但使用 browser-sync 而不是 live-reload 进行交叉测试：

var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');
var path = require('path');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer-core');
var csswring = require('csswring');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;

gulp.task('less', function() {
  var processors = [
    autoprefixer({browsers: ["last 2 version", "> 1%", "ie 9", "ie 8", "ie 7", "ios 6"]}),
    csswring({
      preserveHacks: true,
      removeAllComments: true
    })
  ];
  gulp.src('./css/style.less')  // only compile the entry file
  .pipe(plumber())
  .pipe(less({
    paths: ['./css/']
  } ))
  .pipe(postcss(processors))
  .pipe(plumber.stop())
  .pipe(gulp.dest('./css/'))
  .pipe(reload({stream: true}))
  // .pipe(livereload());
});
gulp.task('serve', ['less'], function() {

    browserSync.init({
        proxy: "http://my-site.dev/"
    });

    gulp.watch("./css/*.less", ['less']);
});

然后我尝试编译这两个文件，以便能够根据我是在进行本地开发还是测试来运行任一任务。我创建了一个“less”任务来编译 css，一个“lrl”实时重新加载监视任务和一个“bs”浏览器同步监视任务。我创建了“less”任务来删除重复，但是现在当我更改 css 时，浏览器会重新加载所有内容，而不仅仅是注入 css。

var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');
var path = require('path');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer-core');
var csswring = require('csswring');
var livereload = require('gulp-livereload');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;

gulp.task('less', function() {
  var processors = [
    autoprefixer({browsers: ["last 2 version", "> 1%", "ie 9", "ie 8", "ie 7", "ios 6"]}),
    csswring({
      preserveHacks: true,
      removeAllComments: true
    })
  ];
  gulp.src('./css/style.less')  // only compile the entry file
  .pipe(plumber())
  .pipe(less({
    paths: ['./css/']
  } ))
  .pipe(postcss(processors))
  .pipe(plumber.stop())
  .pipe(gulp.dest('./css/'))
});

gulp.task('lrl',['less'], function(){
  gulp.src('./css/style.less')  // only compile the entry file
  .pipe(livereload());
});


gulp.task('watch',['lrl'], function() {
  livereload.listen();
  gulp.watch('./**/*.less', ['lrl']);  // Watch all the .less files, then run the less task
});


// browser-sync setup
gulp.task('bs',['less'], function(){
  gulp.src('./css/style.less')  // only compile the entry file
  .pipe(reload({stream: true}))
});

gulp.task('serve', function() {
    browserSync.init({
        proxy: "http://my-site.dev/"
    });
    gulp.watch("./css/*.less", ['bs']);
    gulp.watch("./js/script.js").on('change', reload);
    gulp.watch("./templates/*.php").on('change', reload);
});

// run default task with live reload for local development
gulp.task('default', ['watch']); // Default will run the 'entry' watch task

我对在任务中调用任务的方式有点困惑。有没有办法确保注入 css，以这种方式进行设计要快得多。

非常感谢

=================== 大编辑========================== ==

我一直在搞乱运行序列，但我仍然遇到同样的问题。在某种程度上，这项任务正在发挥作用。使用默认任务，我只能在本地服务器上实时重新加载。使用gulp serve，我得到了一个服务器，我可以在其中跨浏览器和设备调试我的布局。问题是我不再获得 css 注入。看起来 gulp 一直在重新运行所有任务并刷新浏览器以重新连接它。

所以我用重复的代码制作了一个工作版本，以使我想要实现的目标更清晰

var gulp         = require('gulp'),
    less         = require('gulp-less'),
    watch        = require('gulp-watch'),
    plumber      = require('gulp-plumber'),
    path         = require('path'),
    postcss      = require('gulp-postcss'),
    autoprefixer = require('autoprefixer-core'),
    mqpacker     = require('css-mqpacker'),
    csswring     = require('csswring'),
    livereload   = require('gulp-livereload'),
    browserSync  = require('browser-sync').create(),
    reload       = browserSync.reload;


gulp.task('less-lrl', function() {
  var processors = [
    autoprefixer({browsers: ["last 2 version", "> 1%", "ie 9", "ie 8", "ie 7", "ios 6"]}),
    mqpacker,
    csswring({
      preserveHacks: true,
      removeAllComments: true
    })
  ];
  gulp.src('./css/style.less')  // only compile the entry file
  .pipe(plumber())
  .pipe(less({
    paths: ['./css/'],
  } ))
  .pipe(postcss(processors))
  .pipe(plumber.stop())
  .pipe(gulp.dest('./css/'))
  .pipe(livereload());
});
gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('./**/*.less', ['less-lrl']);  // Watch all the .less files, then run the less task
});


gulp.task('less-bs', function() {
  var processors = [
    autoprefixer({browsers: ["last 2 version", "> 1%", "ie 9", "ie 8", "ie 7", "ios 6"]}),
    mqpacker,
    csswring({
      preserveHacks: true,
      removeAllComments: true
    })
  ];
  gulp.src('./css/style.less')  // only compile the entry file
  .pipe(plumber())
  .pipe(less({
    paths: ['./css/']
  } ))
  .pipe(postcss(processors))
  .pipe(plumber.stop())
  .pipe(gulp.dest('./css/'))
  .pipe(reload({stream: true}))
});
gulp.task('serve', ['less-bs'], function() {

  browserSync.init({
    proxy: "http://myserver.dev"
  });

  gulp.watch("./css/*.less", ['less-bs']);
});

gulp.task('default', ['watch']); // Default will run the 'entry' watch task

当我这样做时，它运行顺利。但我想避免“less-lrl”和“less-bs”任务的代码重复。唯一不同的是.pipe(livereload()); 和.pipe(reload({stream: true}))

我脑子里有一些愚蠢的事情，我不明白:)

【问题讨论】：

阅读 - sitepoint.com/build-css-preprocessor-postcss
我的 gulpfile 是一团糟，因为我正在尝试理解 :)。我还不想使用 postcss 作为 less 的替代品（这样做是为了工作，我们都使用 less ）。我被推荐使用 postcss 来处理 autoprefixer。从那时起，我发现了一些我喜欢使用的不错的插件，所以我坚持使用它。感谢您的链接。
你试过我在回答中写的吗？
是的，我做了，但无济于事。
其实我再试一次。我不得不将gulp.src('./**/*.less) 改回gulp.src('./css/style.less)。否则它将所有单独的less文件编译为它们自己文件夹中的css。 css 注入适用于实时重载。但是当我尝试浏览器同步任务时，我遇到了同样的问题。

标签： gulp browser-sync gulp-livereload

【解决方案1】：

如果我正确理解了您的问题，runSequence 将解决您的问题。看这里：https://www.npmjs.com/package/run-sequence

你只需要添加

var runSequence = require('run-sequence');

并创建一个运行您想要的任务的任务。例如：

gulp.task('build', function(callback) {
  return runSequence(
    'less',
    ['lrl'],
    callback
  );
});

然后

gulp.task('watch',['build'], function() {
  livereload.listen();
  gulp.watch('./**/*.less', ['build']);  // Watch all the .less files, then run the less task
});

【讨论】：

【解决方案2】：

注意 - 请不要同时使用 less 和 postcss，因为发明 postcss 是为了替换和增强 less 确实如此。谷歌它..

请确保 LESS 文件路径正确！

试试这样：

var gulp         = require('gulp'),
    less         = require('gulp-less'),
    watch        = require('gulp-watch'),
    plumber      = require('gulp-plumber'),
    path         = require('path'),
    postcss      = require('gulp-postcss'),
    autoprefixer = require('autoprefixer-core'),
    csswring     = require('csswring'),
    livereload   = require('gulp-livereload'),
    browserSync  = require('browser-sync').create(),
    reload       = browserSync.reload;


gulp.task('less', function() {
  var processors = [
    autoprefixer({browsers: ["last 2 version", "> 1%", "ie 9", "ie 8", "ie 7", "ios 6"]}),
    csswring({
      preserveHacks: true,
      removeAllComments: true
    })
  ];

  gulp.src('./**/*.less')  // only compile the entry file
  .pipe(plumber())
  .pipe(less({
    paths: ['./css/']
  } ))
  .pipe(postcss(processors))
  .pipe(plumber.stop())
  .pipe(gulp.dest('./css/'))
  .pipe(livereload());
});


gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('./**/*.less', ['less']);  // Watch all the .less files, then run the less task
});


// browser-sync setup
gulp.task('bs',['less'], function(){
  gulp.src('./css/style.less')  // only compile the entry file
  .pipe(reload({stream: true}))
});

gulp.task('serve', function() {
    browserSync.init({
        proxy: "http://my-site.dev/"
    });
    gulp.watch("./css/*.less", ['bs']);
    gulp.watch("./js/script.js").on('change', reload);
    gulp.watch("./templates/*.php").on('change', reload);
});

// run default task with live reload for local development
gulp.task('default', ['less', 'watch']); // Default will run the 'entry' watch task

【讨论】：

【解决方案3】：

我尝试了上述两个建议的答案，但无济于事。我无法创建一个与“live-relaod”和“browser-sync”任务共享的“less”子任务（它确实一直重新运行所有任务，我失去了 css 注入的好处）。

我设法做的最好的事情就是像这样一起运行它们：

var gulp         = require('gulp'),
    less         = require('gulp-less'),
    watch        = require('gulp-watch'),
    plumber      = require('gulp-plumber'),
    path         = require('path'),
    postcss      = require('gulp-postcss'),
    autoprefixer = require('autoprefixer-core'),
    csswring     = require('csswring'),
    livereload   = require('gulp-livereload'),
    browserSync  = require('browser-sync').create(),
    reload       = browserSync.reload;


gulp.task('less', function() {
  var processors = [
    autoprefixer({browsers: ["last 2 version", "> 1%", "ie 9", "ie 8", "ie 7", "ios 6"]}),
    csswring({
      preserveHacks: true,
      removeAllComments: true
    })
  ];

  gulp.src('./css/style.less')  // only compile the entry file
  .pipe(plumber())
  .pipe(less({
    paths: ['./css/']
  } ))
  .pipe(postcss(processors))
  .pipe(plumber.stop())
  .pipe(gulp.dest('./css/'))
  .pipe(livereload());
});


gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('./**/*.less', ['less']);  // Watch all the .less files, then run the less task
});

gulp.task('serve', function() {
    browserSync.init({
      //files: "**/*.css", 
     files: ['**/*.js', '**/*.php','**/*.css'], // is this better than gulp watch?
      proxy: "http://leadgen.dev/node/1272"
    });
    //gulp.watch("./js/script.js").on('change', reload);
    //gulp.watch("./templates/*.php").on('change', reload);
});

// run default task with live reload for local development
gulp.task('default', ['less', 'watch', 'serve']); // Default will run the 'entry' watch task

所以现在我有两个任务一起运行。不过，我仍然希望能够在其中一个或另一个之间切换。

【讨论】：

【解决方案4】：

我的手写笔也有同样的问题。你可以试试两个dest，可能会有帮助

 gulp.src('./css/style.less')  // only compile the entry file
  .pipe(less({
    paths: ['./css/']
  } ))
  .pipe(gulp.dest('./css/'))
  .pipe(postcss(processors))
  .pipe(gulp.dest('./css/'))
  .pipe(livereload());
});

【讨论】：