首页 > 请问gulp怎么样配置前端目录结构?

请问gulp怎么样配置前端目录结构?

请问如何搭建
dist
|--- css
|--- img
|--- js
|--- fonts
src
|--- scss
|--- img
|--- js
|--- fonts
gulpfile.js
结构?
因为fonts和img文件基本上是不变动的(img就原图,不用imagemini压缩)。
就是说先要把src下的fonts目录和img目录复制到dist/下面。
仆的代码:

var gulp = require("gulp");
var sass = require("gulp-sass");
// 复制静态资源
var staticfolder = [];
var fonts = {
    dist: "dist/fonts/",
    src: "src/fonts/**/*"
}
var img = {
    dist: "dist/img/",
    src: "src/img/**/*"
}
staticfolder = [fonts, img];
gulp.task("static", function () {
    staticfolder.forEach(function (item) {
        gulp.src(item.src).pipe(gulp.dest(item.dist));
    })
});

gulp.task("static:watch", function () {
    var folder = staticfolder.map(function (item) {
        return item.src
    });
    gulp.watch(folder, ["static"])
})

gulp.task("default", ["static:watch"]);

这样的代码在新增的时候还没问题,但是在重命名和删除文件的时候就会遇到问题。
在删除的时候,watch可能会报错,不会同步去删除dist的,然后直接退出watch(重命名跟删除差不多,是一样的问题)。

删除时报错提示:
[13:28:04] Finished 'static' after 4.55 ms
events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: Error watching file for changes: EPERM
    at exports._errnoException (util.js:953:11)
    at FSEvent.FSWatcher._handle.onchange (fs.js:1400:11)

D:\www\gulp\001>

而且还有一个问题,就是我每次变动img目录或者fonts目录都会重新把这些静态资源全部重新复制一遍到dist下,所以我感觉这样不是很科学。请问怎么只复制相应改动的部分呢?


merge-stream吧,npm install --save-dev merge-stream,然后代码改改:

var gulp = require("gulp");
var sass = require("gulp-sass");
var merge = require('merge-stream');
// 复制静态资源
var staticfolder = [];
var fonts = {
    dist: "dist/fonts/",
    src: "src/fonts/**/*"
}
var img = {
    dist: "dist/img/",
    src: "src/img/**/*"
}
staticfolder = [fonts, img];
gulp.task("static", function () {
    var streams = staticfolder.map(function (item) {
        return gulp.src(item.src).pipe(gulp.dest(item.dist));
    })
    return merge.apply(null, streams);
});

gulp.task("static:watch", function () {
    var folder = staticfolder.map(function (item) {
        return item.src
    });
    gulp.watch(folder, ["static"])
})

gulp.task("default", ["static:watch"]);

应该就好了


这种将文件夹复制到 dist 中的功能,最好不要直接使用 pipe 来完成,用同步比较好,比如,可以考虑使用 gulp-files-sync,指定源路径,再指定目的路径就行了。非常方便,而且是只同步修改的部分。

另外还有个gulp-file-sync,功能也类似。

【热门文章】
【热门文章】