码迷,mamicode.com
首页 > 其他好文 > 详细

gulp技巧总结

时间:2018-03-05 19:36:31      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:turn   修改文件   技巧总结   gem   拷贝   str   路径   com   att   

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‘));
});

 

gulp技巧总结

标签:turn   修改文件   技巧总结   gem   拷贝   str   路径   com   att   

原文地址:https://www.cnblogs.com/mengff/p/8510671.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!