Question

我在构建系统方面非常新，这就是为什么抱歉这个问题。

我有这个样板的结构。

/src (working folder) ___/templates(jade files) ___/scss ___/scripts /dist (compiled files) ___/css ___/js ___.html files

在templates文件夹中，我有.jade个文件，这些文件被编译为.html个文件。与.scss个文件相同。当我创建.jade文件时 - 自动编译为.html并移至dist文件夹。我想删除或重命名src文件夹中的文件时 - 它会自动发生在dist文件夹中。这是我的gulpfile.js

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

我尝试添加此

var delDest;
gulp.task('del', function(cb) {
    return del(delDest, cb);
});

并在每个任务函数中给delDest src例如

gulp.task('jade', function() {
    delDest = 'dist/*.html';

并在.watch函数中添加

gulp.watch('src/templates/**/*.jade', ['del', 'jade']);

但它不起作用。请。帮助我做到这一点。当然，如果您在我的gulpfile中提示更改/添加/做得更好，我将非常感激：）

谢谢。

Answer 1

gulp.watch返回的观察者能够在发生添加/更新/删除时专门绑定事件并执行自定义代码。同样的情况已经证实here。

下面是我在项目中使用的示例代码，当我从脚本文件夹中删除ts文件时，我从dev-build文件夹中删除.js和.d.ts文件。

|-dev-build
| |-scripts
|-src
| |-scripts

我有一个简单的文件夹结构，一旦ts文件从src / scripts文件夹中删除，文件就会从dev-build / scripts文件夹中删除。

gulp.task('deleteWatch', function(){
    var watcher = gulp.watch('./src/scripts/**/*.ts',['compilescripts']);

    watcher.on('change', function(event){
        if (event.type === 'deleted'){
            console.log(event.path + " is deleted. Deleting corresponding .js and .d.ts files from dev-build\\scripts");
            var fileNameBase = path.basename(event.path, '.ts');
            del(['./dev-build/scripts/'+fileNameBase+'.*'])
            .then(function(paths){
                console.log("deleted files: " + paths.join('\n'));
                });
        }
    })
})

我使用的npm包是del和path。您需要自定义路径分辨率以适合您的项目结构。但是，当从src中删除文件时，这是删除dist文件的方法。

如果从“src”中删除原型，如何从“dist”文件夹中自动删除文件？

1 个答案: