Я использую 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 для выполнения тех же задач, но с использованием синхронизации браузера вместо живой перезагрузки для перекрестного тестирования:
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» с синхронизацией браузера. Я создал задачу «меньше», чтобы удалить дублирование, но теперь, когда я меняю 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}))
Какая-то ерунда в голове творится, я не понимаю :)
gulp.src('./**/*.less)
наgulp.src('./css/style.less)
. в противном случае он компилирует все отдельные файлы less в css в своих собственных папках. Инъекция css отлично работает с live-reload. Но когда я пытаюсь выполнить задачу синхронизации браузера, у меня возникает та же проблема. - person Yannick Schall   schedule 30.04.2015_
, но если у вас есть только один файл, который включает в себя все остальные, ваша установка в порядке. - person vsync   schedule 30.04.2015serve
. тебе это надо? - person vsync   schedule 30.04.2015