Question

我在目录（和子目录）中有css和js文件。我正在寻找不同的工具来压缩所有目录中的资产。我正在尝试找到一种方法来压缩这些目录中的所有文件，并将压缩文件保存在相同的目录中，并使用以下约定命名： [name]。 min.css 或 [name] .min.js 。所以 example.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在下一次构建时再次缩小的否定模式!css/**/*.min.css。与JavaScript相同。

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

Gulp处理目录中的所有文件

1 个答案: