Синхронизация папок и файлов в gulp?

C
На сайте с 06.02.2014
Offline
43
2503

Здравствуйте. Учусь использовать gulp, возникла проблема. Как отследить удаление/переименование файлов в рабочей папке (он у меня src) и делать то же самое в соответствующей папке готового проекта (dist у меня). Вот gulpfile

var gulp = require('gulp');

var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var csso = require('gulp-csso');
var rename = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');
var jade = require('gulp-jade');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var plumber = require('gulp-plumber');

//sass
gulp.task('sass', function() {
return gulp.src('src/scss/**/*.scss')
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 5 versions'],
cascade: false
}))
.pipe(gulp.dest('dist/css'))
.pipe(rename({
suffix: '.min'
}))
.pipe(autoprefixer({
browsers: ['last 5 versions'],
cascade: false
}))
.pipe(csso())
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.reload({
stream: true
}));
});
//browserSync
gulp.task('browserSync', function() {
browserSync({
server: {
baseDir: 'dist'
},
});
});

//jade
gulp.task('jade', function() {
return gulp.src('src/templates/**/!(_)*.jade')
.pipe(plumber())
.pipe(jade({
pretty: true
}))
.pipe(gulp.dest('dist'))
.pipe(browserSync.reload({
stream: true
}));
});

//scripts
gulp.task('uglify', function() {
return gulp.src('src/scripts/**/*.js')
.pipe(plumber())
.pipe(gulp.dest('dist/js'))
.pipe(concat('app.min.js'))
.pipe(gulp.dest('dist/js'))
.pipe(uglify({
mangle: false
}))
.pipe(gulp.dest('dist/js'))
.pipe(browserSync.reload({
stream: true
}));
});

gulp.task('watch', ['browserSync', 'sass', 'jade', 'uglify'], function() {
gulp.watch('src/scss/**/*.scss', ['sass']);
gulp.watch('src/templates/**/*.jade', ['jade']);
gulp.watch('src/scripts/**/*.js', ['uglify']);
});

Ну и естественно буду благодарен если что подскажете, поможете изменить/добавить/сделать лучше в этом файле :)

Спасибо.

Оптимизайка
На сайте с 11.03.2012
Offline
396
#1

Ну теперь запускаете gulp watch и наслаждаетесь. Или формулируйте вопрос конкретнее.

⭐ BotGuard (https://botguard.net) ⭐ — защита вашего сайта от вредоносных ботов, воровства контента, клонирования, спама и хакерских атак!
C
На сайте с 06.02.2014
Offline
43
#2

Ну смотрите, допустим я хочу добавить файл page.jade в src>templates и сделал опечатку - написал pafe.jade. Теперь удаляю этот файл или переименовываю, мне нужно чтобы тоже самое происходило для файла dist > pafe.html

И так со стилями, скриптами тоже :)

Иерархия папок у меня такая

/src (рабочая папка)

/templates(jade файлы)

/scss

/scripts

/dist (папка с готовыми файлами)

/css

/js

.html
DiAksID
На сайте с 02.08.2008
Offline
218
#3

адназначна стоит заменить gulp-csso на gulp-cssnano ...

show must go on !!!...
werty1001
На сайте с 30.03.2008
Offline
82
#4

Напишите новый таск и просто удаляйте html перед компиляцией jade.

Магазин аккаунтов с балансом Litres,DNS,Ozon,Rotapost и еще 50+ других сервисов тут - vk.cc/7QK0Sk

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий