Question

我正在使用gulp编译一些.less文件并在浏览器中注入带有实时重载的更改。

这是我最初创建的任务：

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任务来执行相同的任务，但使用浏览器同步而不是实时重载进行交叉测试：

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']);
});

然后我尝试编译这两个文件，以便能够运行任务，具体取决于我是在进行本地开发还是测试。我创建了一个“少”任务来编译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}))

我脑中有一些stoopid，我不明白：）

Answer 1

注意 - 请不要同时使用 less 和 postcss ，因为 postcss 是为了替换和增强 less <而发明的/ strong>确实。谷歌.. ..

请确保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

Answer 2

我尝试了上述两个建议的答案但无济于事。我无法创建一个“较少”的子任务与“live-relaod”和“browser-sync”任务共享（它确实重新运行所有任务，并且我放弃了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

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

Answer 3

我的手写笔问题也一样。您可以尝试两个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());
});

Gulp任务链接

3 个答案: