Gulp 增强

##一、删除文件和文件夹

直接删除文件

你也许会想要在编译文件之前删除一些文件。由于删除文件和文件内容并没有太大关系，所以，我们没必要去用一个 gulp 插件。最好的一个选择就是使用一个原生的 node 模块。

因为 del 模块支持多个文件以及 globbing，因此，在这个例子中，我们将使用它来删除文件：

npm install --save-dev gulp del

使用例子

var gulp = require('gulp');
var del = require('del');

gulp.task('clean:mobile', function (cb) {
  del([
    'dist/report.csv',
    // 这里我们使用一个通配模式来匹配 `mobile` 文件夹中的所有东西
    'dist/mobile/**/*',
    // 我们不希望删掉这个文件，所以我们取反这个匹配模式
    '!dist/mobile/deploy.json'
  ], cb);
});

gulp.task('default', ['clean:mobile']);

###在管道pipe中删除文件 我们使用 vinyl-paths 模块来简单地获取 stream 中每个文件的路径，然后传给 del 方法。

npm install --save-dev gulp del vinyl-paths

var gulp = require('gulp');
var stripDebug = require('gulp-strip-debug'); // 仅用于本例做演示
var del = require('del');
var vinylPaths = require('vinyl-paths');

gulp.task('clean:tmp', function () {
  return gulp.src('tmp/*')
    .pipe(stripDebug())
    .pipe(gulp.dest('dist'))
    .pipe(vinylPaths(del));
});

gulp.task('default', ['clean:tmp']);

##二、文件重命名 安装gulp-rename插件

npm install gulp-rename --save-dev  

var rename = require("gulp-rename");

// rename via string
gulp.src("./src/main/text/hello.txt")
  .pipe(rename("main/text/ciao/goodbye.md"))
  .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/goodbye.md

// rename via function
gulp.src("./src/**/hello.txt")
  .pipe(rename(function (path) {
    path.dirname += "/ciao";
    path.basename += "-goodbye";
    path.extname = ".md";
    return path;
  }))
  .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/hello-goodbye.md

// rename via hash
gulp.src("./src/main/text/hello.txt", { base: process.cwd() })
  .pipe(rename({
    dirname: "main/text/ciao",
    basename: "aloha",
    prefix: "bonjour-",
    suffix: "-hola",
    extname: ".md"
  }))
  .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/bonjour-aloha-hola.md

• dirname 是 基于 gulp.src`设定的基准路径之后的相对路径
  • gulp.src() 用法见之前的文章。 dirname 是之后的子目录 （没有子目录就是./）. 使用glob-stream 版本 >= 3.1.0 (gulp版本 >= 3.2.2) 接受 base 选项, 用于设置基准目录。
  • gulp.dest() 重命名 在 process.cwd() 和 dirname (即 当前工作路径的相对基准路径the base relative to CWD)之间的目录. 使用dirname时会当作是base路径的子目录，根据glob的语法。
• basename is the filename without the extension like path.basename(filename, path.extname(filename)).
• extname is the file extension including the '.' like path.extname(filename).

process.cwd():返回运行当前脚本的工作目录的路径。

gulp 拷贝文件时如何移除文件目录结构

gulp.task('image', function () {  
    return gulp.src(['src/images/*','src/components/**/images/*'])  
        .pipe(rename({dirname: ''}))  //**就是这行起作用**
        .pipe(imagemin({  
            progressive: true,  
            svgoPlugins: [{removeViewBox: false}],  
            use: [pngquant({ quality: '65-80', speed: 4 })]  
        }))  
        .pipe(gulp.dest('./dist/images/'));  
});  

##三、gulp-load-plugins[模块化管理插件]

使用gulp-load-plugins模块，可以加载package.json文件中所有的gulp模块。上面的代码用gulp-load-plugins模块改写，就是下面这样。

###安装

npm install --save-dev gulp-load-plugins

假设package.json文件包含以下内容。

{
   "devDependencies": {
      "gulp-concat": "~2.2.0",
      "gulp-uglify": "~0.2.1",
      "gulp-jshint": "~1.5.1",
      "gulp": "~3.5.6"
   }
}

里面引用模块的方式就可以变成：

var gulp = require('gulp'),
    gulpLoadPlugins = require('gulp-load-plugins'),
    plugins = gulpLoadPlugins();

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(plugins.jshint())
      .pipe(plugins.jshint.reporter('default'))
      .pipe(plugins.uglify())
      .pipe(plugins.concat('app.js'))
      .pipe(gulp.dest('build'));
});```

可选项：

gulpLoadPlugins({ DEBUG: false, // 当设置为true时。插件会想控制台写入日志。在Debug时候很有用 pattern: ['gulp-', 'gulp.'], // glob模式，搜索专用 config: 'package.json', // 默认在process.cwd()目录下搜索package.json scope: ['dependencies', 'devDependencies', 'peerDependencies'], // 配置的key是用来搜索插件的 replaceString: /^gulp(-|.)/, // 在将它添加到上下文时，从模块的名称中删除 camelize: true, // 如果属实，将插件名称联用驼峰法 lazy: true, // 插件是否需要被懒加载 rename: { // 重命名的配置 'gulp-ruby-sass': 'sass' } , renameFn: function (name) { ... } //重命名的处理函数 });

================================================================
##待续

转载于:https://my.oschina.net/reamd7/blog/732002