2

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 タスクを作成しましたが、クロス テストには live-reload の代わりに browser-sync を使用しました。

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 をコンパイルする「less」タスク、「lrl」ライブ リロード監視タスク、「bs」ブラウザ同期監視タスクを作成しました。重複を削除するために「少ない」タスクを作成しましたが、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 が挿入されていることを確認する方法はありますか?この方法で設計に取り組む方がはるかに高速です。

どうもありがとう

=================== 大きな編集 ===========================

私は実行シーケンスをいじっていますが、まだ同じ問題があります。何らかの方法でタスクが機能しています。デフォルトのタスクでは、ローカル サーバーでのみ live-reload を取得します。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}))

私の脳内で愚かなことが起こっています、私は理解していません:)

4

4 に答える 4

1

注 - lessとpostcssの両方を一緒に使用しないでください 。グーグルで..

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
于 2015-04-29T17:38:02.580 に答える
0

スタイラスでも同じ問題があります。あなたは2つ試すことができます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());
});
于 2015-07-21T12:20:13.173 に答える