如何在Gulp任务中的HTML文件后重命名zip文件

时间:2018-03-13 22:59:59

标签: javascript gulp

我正在尝试使用gulp-zip压缩我的dist文件夹中的所有文件,并希望在该目录中唯一的html文件之后动态命名zip文件。这是我尝试使用gulp-filenames,但没有运气。



const rename = require('gulp-rename');
const zip = require('gulp-zip');
var filenames = require('gulp-filenames');

gulp.task('zipp', function(){
	gulp.src('dist/*')
			.pipe(zip('_final.zip'))
			.pipe(rename({prefix:getHtmlName()}))
			.pipe(gulp.dest('./dist'))
})

function getHtmlName(){
	gulp.src("./src/*.html")
	.pipe(filenames("html"))
	.pipe(gulp.dest("./dist"));
	return filenames.get("html");
}




1 个答案:

答案 0 :(得分:0)

以下是两种方式:

const gulp = require('gulp');
const rename = require('gulp-rename');
const zip = require('gulp-zip');
const filenames = require('gulp-filenames');

// run the getHTMLname task first, filenames will then have the data stored in an array

gulp.task('zipp', ['getHTMLname'], function () {

    return gulp.src('dist/*')
    .pipe(zip('_final.zip'))

    // rename gets the file passing through it, in this case '_final.zip'

    .pipe(rename(function (path) {

      // retrieve the array of string filenames, use the first and only one in the array
      // and get the basename via split

      path.basename = filenames.get("html")[0].split('.')[0] + path.basename;
    }))

        .pipe(gulp.dest('./dist'))
})

gulp.task('getHTMLname', function () {
  return gulp.src("./dist/*.html")
    .pipe(filenames("html"))
});

//  **************************************************************

const gulp = require('gulp');
const rename = require('gulp-rename');
const zip = require('gulp-zip');

const glob = require("glob");
const path = require('path');

gulp.task('zipp', function () {

  return gulp.src('dist/*')
    .pipe(zip('_final.zip'))

    .pipe(rename(function (file) {

      // glob.sync returns an array, get the first member of that array
      // path.basename('string', '.html') returns the name of the file without the extension

      var temp = path.basename(glob.sync("./dist/*.html")[0], '.html');
      file.basename = temp + file.basename;
    }))
    .pipe(gulp.dest('./dist'))
});

如果你真的想使用gulp-filenames,请使用********上面的代码。 'getHTMLname'任务必须首先运行 - 也就是当gulp-filenames从你提供它的任何源目录构建其文件名数组时。该数组稍后可以在后续任务中的任何位置使用。

但是,我建议使用glob和路径模块的第二种方法,无论如何你应该学习。第二种方法不需要单独的任务,它只需要获取你想要的同一任务中的html文件名,因此它更简单。此外,当我安装gulp-filenames时,它使用了大量已弃用的模块,因此非常需要更新。它现在可以工作,但可能不会更新节点等。