【Gulp Tips】如何正确地删除文件
发布于 10 年前 作者 soliury 10206 次浏览 最后一次编辑是 8 年前 来自 分享

【Gulp Tips】如何删除文件

前缀

今天在坛子里有人问到如何删除文件，后来就顺便看了看。做个记录，也做分享。

PS: 问题详情

什么时候需要删除文件

在前端项目中，buid文件是每一次build都会产生的，为了防止上一次build的文件和这次build的文件都存在，最好是删除上一次的build文件。

有时候项目中也回产生一些temp文件，这个文件只是作为一个中间过渡作用，用完就应该删除。

如何使用del

删除文件上，使用del这个库相当不错。用法也很简单。

用法一：直接调用删除

例如：

config = require '../config'
gulp = require 'gulp'
del = require 'del'


gulp.task 'clean', (cb)->
  del [config.dist.root], cb

用法二：在pipeline中删除

var gulp = require('gulp');
var stripDebug = require('gulp-strip-debug');
var del = require('del');
var vinylPaths = require('vinyl-paths');

gulp.task('delete', function () {
    return gulp.src('app/*')
        .pipe(stripDebug())
        .pipe(vinylPaths(del));
});

这需要注意的是，在pipeline中删除的就是该流中vinyl file的路径，假设说，在gulp.dest()之后用pipeline删除，其中的path就是指gulp.dest之后的路径。

例如：

gulp.task('delete2', function (cb) {
    var vp = vinylPaths();

    gulp.src('app/*')
        .pipe(vp)
        .pipe(gulp.dest('dist'))
        .on('end', function () {
            del(vp.paths, cb);
        });
});

错误的用法

之前有个网友提了个问题，点击此处查看。

错误的用法就是，没能理解vinly file path的含义，每次gulp.dest之后，vinly file path会改变成gulp.dest之后。

如何去分析这个错误

为了验证这个错误，可以如下代码来测试：

gulp.task 'vp', ->
  gulp.src ['./.temp/templates/**/*.js']
  .pipe gulp.dest './.temp/vp'
  .pipe through.obj (file, enc, callback)->
    console.log file.path
    callback()

output:

/Users/soliury/soliury/work/git/ngFast/.temp/vp/templates.js
/Users/soliury/soliury/work/git/ngFast/.temp/vp/templates_v0.2.11.js
/Users/soliury/soliury/work/git/ngFast/.temp/vp/templates_v0.2.12.js

从上可知，在gulp.dest之后的vinly file的路径变成了dest之后的路径，并不是原来的路径。

稍微改动一下上面的代码，可以更加清晰地了解vinylPaths的作用。

gulp.task 'vp', ->
  vpBefore = vinylPaths()
  vpAfter = vinylPaths()
  gulp.src ['./.temp/templates/**/*.js']
  .pipe vpBefore
  .pipe gulp.dest './.temp/vp'
  .pipe vpAfter
  .on 'end', ()->
    console.log 'before:'
    console.log vpBefore.paths
    console.log 'after'
    console.log vpAfter.paths

output:

before:
[ '/Users/soliury/soliury/work/git/ngFast/.temp/templates/templates.js',
  '/Users/soliury/soliury/work/git/ngFast/.temp/templates/templates_v0.2.11.js',
  '/Users/soliury/soliury/work/git/ngFast/.temp/templates/templates_v0.2.12.js' ]
after
[ '/Users/soliury/soliury/work/git/ngFast/.temp/vp/templates.js',
  '/Users/soliury/soliury/work/git/ngFast/.temp/vp/templates_v0.2.11.js',
  '/Users/soliury/soliury/work/git/ngFast/.temp/vp/templates_v0.2.12.js' ]

所以在什么地方pipe vinypath就会把当时的path记录下来。所以想要删除哪个路径就用vinypath记录下来，然后在stream end的时候调用del删除就可以了。

完整的例子

gulp = require 'gulp'
templateCache = require 'gulp-angular-templatecache'
htmlmin = require 'gulp-htmlmin'
gulpif = require 'gulp-if'
htmlreplace = require 'gulp-html-replace'
duration = require 'gulp-duration'
source = require 'vinyl-source-stream'
browserify = require 'browserify'
transform = require 'vinyl-transform'
browserSync = require 'browser-sync'
rename = require 'gulp-rename'
vinylPaths = require 'vinyl-paths'
del = require 'del'


through = require 'through2'

config = require '../config'


gulp.task 'views', (cb)->
  {isDebug} = global

  vp = vinylPaths()

  browserified = transform (filename)->
    b = browserify()
    b.require 'templates.js'
    b.bundle()

  name = 'templates.js'

  if not isDebug
    name = "templates_v#{global.versionTag}.js"


  gulp.src config.views.src
  .pipe gulpif isDebug, htmlmin
    removeComments: true
    collapseWhitespace: true
  .pipe templateCache name,
    standalone: true
  .pipe gulp.dest './.temp/templates'
  .pipe vp
  .pipe browserified
  .pipe gulp.dest config.scripts.dest
  .pipe browserSync.reload
    stream: true
  .on 'end', ->
    del vp.paths

从以上的代码可以看出，views任务主要用来将所有的html页面打包成一个angular module，然后写入templates.js文件中去，而且可以作为browserify包对外引用。

其中一个./.temp/templates是暂存文件的，一般来说，用过以后就应该删除的。所以我在.pipe gulp.dest './.temp/templates'后加了一句.pipe vp，将此时的文件路径记录下来。然后在整个stream end之后调用del删除暂存文件。

回到顶部