Gulp处理目录中的所有文件 [英] Gulp process all files in directory

问题描述

我在目录（和子目录）中有css和js文件。我正在研究不同的工具来压缩所有目录中的资产。我试图找到一种方法让gulp压缩这些目录中的所有文件，并将压缩文件保存在相同目录中，并使用以下约定命名： [name]。 min.css 或 [名称] .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

解决方案

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

• 使清理构建和从头开始重新创建所有内容变得更加容易：只需删除一个输出文件夹即可。


• 您不必担心生成的文件会被您的构建意外拾取并重新处理。
  

但是，既然你问了，这是一个解决方案，它在原始文件的同一目录下创建缩小文件。这为每个 .css 添加一个 .min.css 和 .min.js / code>和 .js 文件。假设所有CSS文件位于名为 css （或其子目录）的目录中，并假定所有JS文件位于名为 js （或其子目录）：



  var gulp = require（'gulp'）; 
 var rename = require（'gulp-rename'）; 
 var cssnano = require（'gulp-cssnano'）; 
 var uglify = require（'gulp-uglify'）; 
 $ b gulp.task（'css'，function（）{
 return gulp.src（[
'css / ** / *。css'，
' ！css / ** / *。min.css'，
]）
 .pipe（cssnano（））
 .pipe（重命名（函数（路径）{
路径。 （）; 
}）） 
 $ b $ gulp.task（'js'，function（）{
 return gulp.src（[
'js / ** / *。js'，
' js / ** / * .min.js'，
]）
 .pipe（uglify（））
.pipe（重命名（函数（路径）{
路径。 extname =.min.js; 
}））
 .pipe（gulp.dest（'js'））; 
}）; 
 
 gulp.task（'default'，['css'，'js']）; 
  

注意否定模式！css / ** / *。min.css 用于阻止已经缩小的CSS在下一个版本中再次缩小 。相同的JavaScript。

我用吞-cssnano 和 gulp-uglify 来缩小CSS和JS，但是有很多其他的选择可以作为直接替换。

I have css and js files in a directory (and subdirectories). I'm looking into different tools to compress the assets in all the directories. I'm trying to find a way to get gulp to compress all the files in those directories and save the compressed file in the same directory and name it with the following convention: [name].min.css or [name].min.js. So example.js would become example.min.js.

Is there a way to achieve this?

I've read the following on this:

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

解决方案

You usually don't want to generate the minified files in the same directory as the original files. You write all files that are generated by your build script to a single output directory. Some advantages of this approach are:

• Makes it easier to clean the build and recreate everything from scratch: you just delete that one output folder.
• You don't have to worry about generated files accidentally getting picked up by your build and getting processed again.

But since you asked, here's a solution that creates the minified files in the same directory as the original files. This creates a .min.css and .min.js file for every .css and .js file. All CSS files are assumed to be in a directory called css (or its subdirectories) and all JS files are assumed to be in a directory called js (or its subdirectories):

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

Notice the negation pattern !css/**/*.min.css that is used to prevent the already minified CSS from getting minified again on the next build. Same for the JavaScript.

I used gulp-cssnano and gulp-uglify to minify the CSS and JS, but there's plenty of other options out there that can act as drop-in replacements.

这篇关于Gulp处理目录中的所有文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！