Gulp build HTML в зависимости от изменений файлов - PullRequest
0 голосов
/ 22 сентября 2018

У меня есть такая структура каталогов: /build /src /html /pages index.html about.html ... /partials _footer.html _header.html /stylus /js /fonts /img Ну, стандартная структура каталогов, я наблюдаю за изменениями в моей папке ./src и запускаю конкретные задачи для html, css, js и т. Д. Ну, вопрос - когда я вносил измененияв мой . / src / html / partials файл - мне нужно перестроить все мои . / src / html / pages файлы, но когда я изменяю один из . / src/ html / pages , скажем, index.html , мне нужно перестроить только этот один файл.В настоящее время мой код просто выполняет задачу build: html для любого изменения в . / Src / html , и он перестраивает все из . / Src / html / pages Возможно ли получить такое поведение (используйте другой глобус для моей сборки: html, в зависимости от измененных файлов)? Спасибо.Вот мой текущий gulpfile.js

var gulp = require('gulp');
// Utils
var del = require('del');
var rigger = require('gulp-rigger');
var yargs = require('yargs');
const spritesmith = require('gulp.spritesmith');
const merge = require('merge-stream');
// Server
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
// CSS(minification - cssnano)
var stylus = require('gulp-stylus');
var nib = require('nib');
var sourcemaps = require('gulp-sourcemaps');
var postcss = require('gulp-postcss');
// Error handling and notifications
var plumber = require('gulp-plumber');
var notify = require("gulp-notify");
// Save to memory
var GulpMem = require('gulp-mem');
var gulpMem = new GulpMem();

// Main files to compile
const src = {
  html: './src/html/pages/*.html',
  css: './src/styl/[^_]*.styl',
  js: './src/js/main.js',
};

// What files to watch(src folder, by subfolders)
const watch = {
  html: './src/html/**/*.html',
  css: './src/styl/**/*.*',
  js: './src/js/**/*.*',
};

// Says for itself
const dest = {
  html: './dest',
  css: './dest/css',
  js: './dest/js',
};

// Plugin's and custom settings
gulpMem.serveBasePath = './dest';
gulpMem.enableLog = false;
var argv = yargs.default({
  toMemory: true
}).argv;


// Build tasks
gulp.task('build:html', function() {
  return gulp.src(src.html)
    .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
    .pipe(rigger())
    .pipe(argv.toMemory ? gulpMem.dest(dest.html) : gulp.dest(dest.html))
    .pipe(reload({stream:true}));
});

gulp.task('build:css', function() {
  var plugins = [
    require('postcss-import')(),
    require('autoprefixer')({
      browsers: ['> 0%']
    })
  ];

  return gulp.src(src.css)
    .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
    .pipe(sourcemaps.init())
    .pipe(stylus({
      use: nib()
    }))
    .pipe(postcss(plugins))
    .pipe(sourcemaps.write('.'))
    .pipe(argv.toMemory ? gulpMem.dest(dest.css) : gulp.dest(dest.css))
    .pipe(reload({stream:true}));
});

gulp.task('build:js', function() {
  return gulp.src(src.js)
    .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
    .pipe(rigger())
    .pipe(argv.toMemory ? gulpMem.dest(dest.js) : gulp.dest(dest.js))
    .pipe(reload({stream:true}));
});

// General build
gulp.task('build', gulp.parallel(
  'build:html',
  'build:css', 
  'build:js', 
));

// Static Server + watching html files
gulp.task('serve', function(done) {
  browserSync.init({
    server: dest.html,
    middleware: gulpMem.middleware
  });

  done();
});

gulp.task('watch', function(done) {
  gulp.watch(watch.html, gulp.series('build:html'));
  gulp.watch(watch.css, gulp.series('build:css'));
  gulp.watch(watch.js, gulp.series('build:js'));
  done();
});

gulp.task('default', gulp.series(
  'build',
  gulp.parallel(
    'serve',
    'watch'
  )
));

gulp.task('clean', function(done) {
  del('dest');
  done();
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...