gulp技巧總結

看風景就發表於2018-03-05

1. gulp.dest 會自動建立目錄

gulp.dest(dir)，若dir不存在，gulp會自動建立它

2. gulp.src copy具名路徑(即不子目錄**的路徑)的檔案，不會保留資料夾路徑

gulp.src('static/user/user.js')
    .pipe(gulp.dest('dist));

gulp.src('static/*.js'); //一級的*.xx檔案也不會保留路徑

如上，將user.js拷貝到dist，會形成如下結構

dist
　　user.js

若要保留路徑，即形成

dist
　　static
　　　　user
　　　　　　user.js

需要新增base選項，如下：

gulp.src('static/user/user.js', {base:'.'})
    .pipe(gulp.dest('dist));
//或者使用萬用字元
gulp.src('static*/user*/user.js')
    .pipe(gulp.dest('dist));

3. gulp.src copy帶有*的路徑的檔案，會保留資料夾路徑

gulp.src('login/**/*.js')
    .pipe(gulp.dest('dist'));


複製到dist的檔案是帶資料夾的

要解決這個問題，有如下方法：

1. gulp-flatten外掛可以拍平檔案結構

var gulp = require('gulp-flatten');
//轉移圖片並壓縮
gulp.task('copy-images', function() {
    return gulp.src(['./src/common/images/**/*'])
        .pipe(flatten())
        .pipe(imagemin())
        .pipe(gulp.dest('./build/images'));
});

2. gulp-rename外掛可以修改檔案路徑和檔名

var gulp = require('gulp-rename');
//轉移圖片並壓縮
gulp.task('copy-images', function() {
    return gulp.src(['./src/common/images/**/*'])
        .pipe(rename({dirname: ''}))
        .pipe(imagemin())
        .pipe(gulp.dest('./build/images'));
});

 

相關文章