190.gulp給文件重命名

在cmd窗口進入項目所在的文件夾，執行：npm install gulp-rename --save-dev

--save-dev就是將此安裝包，安裝在該項目中，而且將安裝包記錄到項目中的package.json中。

由以前對css文件進行壓縮處理的狀況來看，能夠很好地進行文件的壓縮，可是壓縮事後的文件，保存到另一個文件夾中仍是原來未壓縮的時候的文件名，這樣的話，在進行引用的時候，他就不知道究竟是沒有壓縮的文件，仍是通過壓縮的文件了，因此咱們能夠將壓縮過的文件進行重命名，示例代碼以下：

//在js中導入nodo中的包的時候，須要使用到一個函數require()
//只須要將所須要導入的包傳遞給require()函數就能夠了
var gulp =require('gulp');
var cssnano = require('gulp-cssnano');
var rename = require('gulp-rename');


gulp.task('css', function() {
    gulp.src('./css/*.css')
    .pipe(cssnano())
    //這個命令規則就是在通過壓縮事後的文件候命加上一個後綴爲min
    .pipe(rename({
        'suffix':'.min'
    }))
    .pipe(gulp.dest('./dist/css/'))
});

其中，gulp-rename的相關介紹能夠詳細的查看：https://www.npmjs.com/package/gulp-rename

在這裏摘錄了rename的相關使用：

var rename = require("gulp-rename");
 
// rename to a fixed value
gulp.src("./src/main/text/hello.txt")
    //rename the filename
  .pipe(rename("main/text/ciao/goodbye.md"))
  //the destination
  .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/goodbye.md
 
// rename via mutating function
gulp.src("./src/**/hello.txt")
  .pipe(rename(function (path) {
    // Updates the object in-place
    path.dirname += "/ciao";
    path.basename += "-goodbye";
    path.extname = ".md";
  }))
  .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/hello-goodbye.md
 
// rename via a map function
gulp.src("./src/**/hello.txt")
  .pipe(rename(function (path) {
    // Returns a completely new object, make sure you return all keys needed!
    return {
      dirname: path.dirname + "/ciao",
      basename: path.basename + "-goodbye",
      extname: ".md"
    };
  }))
  .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/hello-goodbye.md
 
// rename via a fixed object
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