Gulp 处理目录中的所有文件

Question

我在一个目录(和子目录)中有 css 和 js 文件。我正在研究不同的工具来压缩所有目录中的 Assets 。我试图找到一种方法让 gulp 压缩这些目录中的所有文件并将压缩文件保存在 中。同 目录并使用以下约定命名: [名称].min.css 或 [名称].min.js .所以示例.js 会变成 example.min.js .

有没有办法实现这一目标？

我已经阅读了以下内容:

http://gulpjs.com/plugins/

https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

https://github.com/gulpjs/gulp/blob/master/docs/API.md

Answer 1

您通常不想在与原始文件相同的目录中生成缩小的文件。您将构建脚本生成的所有文件写入单个输出目录。这种方法的一些优点是:

更容易清理构建并从头开始重新创建所有内容:您只需删除那个输出文件夹。

您不必担心生成的文件会被您的构建意外获取并再次处理。

但是既然你问了，这里有一个解决方案，它在与原始文件相同的目录中创建缩小的文件。这将创建一个 .min.css和 .min.js每个 .css 的文件和 .js文件。假定所有 CSS 文件都位于名为 css 的目录中。 (或其子目录)并且所有 JS 文件都假定在名为 js 的目录中。 (或其子目录):

var gulp = require('gulp');
var rename = require('gulp-rename');
var cssnano = require('gulp-cssnano');
var uglify = require('gulp-uglify');

gulp.task('css', function () {
  return gulp.src([
      'css/**/*.css',
      '!css/**/*.min.css',
     ])
    .pipe(cssnano())
    .pipe(rename(function(path) {
      path.extname = ".min.css";
    }))
    .pipe(gulp.dest('css'));
});

gulp.task('js', function () {
  return gulp.src([
      'js/**/*.js',
      '!js/**/*.min.js',
     ])
    .pipe(uglify())
    .pipe(rename(function(path) {
      path.extname = ".min.js";
    }))
    .pipe(gulp.dest('js'));
});

gulp.task('default', ['css', 'js']);

注意否定模式 !css/**/*.min.css用于防止已经缩小的 CSS 在下一次构建时再次缩小。 JavaScript 也是如此。

我用过 gulp-cssnano和 gulp-uglify缩小 CSS 和 JS，但还有很多其他选项可以作为替代品。