gulp实用配置（2）——中小项目

上一篇的gulp配置很简单，主要就是为了demo的查看和调试，这一篇则会相对详细一些，包括压缩合并打时间戳等。

在互联网环境比较好的城市，需要多人协作的，大一点的项目应该都用上了模块化（这里主要指commonjs和ES6模块系统，不是再早的require.js和sea.js）。代码也会更注重如何分离和注入，而不再是单纯的合并。

但是在很多小公司，开发模式或技术都还是比较传统的，或者一些小项目也完全不需要用上那些比较前沿的技术。

所以这篇配置就主要为了这样的中小项目。

1.所需工具和版本

包管理工具：yarn v0.24.5

自动化构建工具：gulp v4.0

2.工具安装

yarn add global gulpjs/gulp#4.0

3.开发环境配置

<span style="color: #0000ff">var</span> gulp = require('gulp'<span style="color: #000000">),
    pug </span>= require('gulp-pug'<span style="color: #000000">),
    less </span>= require('gulp-less'<span style="color: #000000">),
    </span><span style="color: #008000">//</span><span style="color: #008000">当发生异常时提示错误 确保本地安装gulp-notify和gulp-plumber</span>
    notify = require('gulp-notify'<span style="color: #000000">),
    plumber </span>= require('gulp-plumber'<span style="color: #000000">),
    sourcemaps </span>= require('gulp-sourcemaps'<span style="color: #000000">),
    browserSync </span>= require('browser-sync'<span style="color: #000000">).create()
    reload </span>=<span style="color: #000000"> browserSync.reload;

</span><span style="color: #0000ff">var</span> LessAutoprefix = require('less-plugin-autoprefix'<span style="color: #000000">),
    autoprefix </span>= <span style="color: #0000ff">new</span> LessAutoprefix({ browsers: ['last 2 versions'<span style="color: #000000">] });

</span><span style="color: #008000">//</span><span style="color: #008000"> 文件路径</span>
<span style="color: #0000ff">var</span> paths =<span style="color: #000000"> {
  pug: {
    src: </span>'src/pug/pages/*.pug'<span style="color: #000000">,
    dest: </span>'dev/html/'<span style="color: #000000">,
    watch: </span>'src/pug/**/*.pug'<span style="color: #000000">
  },
  less: {
    src: </span>'src/less/**/*.less'<span style="color: #000000">,
    dest: </span>'dev/css/'<span style="color: #000000">,
    watch: </span>'src/less/**/*.less'<span style="color: #000000">
  },
  js: {
    src: </span>'src/js/**/*.js'<span style="color: #000000">,
    dest: </span>'dev/js/'<span style="color: #000000">,
    watch: </span>'src/js/**/*.js'<span style="color: #000000">
  },
  img: {
    src: </span>'src/img/**/*'<span style="color: #000000">,
    dest: </span>'dev/img/'<span style="color: #000000">,
    watch: </span>'src/img/**/*'<span style="color: #000000">
  }
}

</span><span style="color: #008000">//</span><span style="color: #008000"> 启动 browserSync 服务，自己启动server，并且为浏览器实时刷新提供服务</span>
gulp.task('browserSync', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> browserSync.init({
    server: {
      baseDir: </span>'./'<span style="color: #000000">
    },
    files: </span>'./dev/**/*'<span style="color: #000000">
  });
})

</span><span style="color: #008000">//</span><span style="color: #008000"> 将pug文件转换为html</span>
gulp.task('pug', <span style="color: #0000ff">function</span><span style="color: #000000"> buildHTML() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> gulp.src(paths.pug.src)
    .pipe(plumber({errorHandler: notify.onError(</span>'Error: <%= error.message %>'<span style="color: #000000">)}))
    .pipe(pug())
    .pipe(gulp.dest(paths.pug.dest));
});

</span><span style="color: #008000">//</span><span style="color: #008000"> 编译less文件</span>
gulp.task('less', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> gulp.src(paths.less.src)
    .pipe(plumber({errorHandler: notify.onError(</span>'Error: <%= error.message %>'<span style="color: #000000">)}))
    .pipe(sourcemaps.init())
    .pipe(less({
      plugins: [autoprefix]
    }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.less.dest));
})

</span><span style="color: #008000">//</span><span style="color: #008000"> 复制js文件</span>
gulp.task('js', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> gulp.src(paths.js.src)
    .pipe(gulp.dest(paths.js.dest));
})

</span><span style="color: #008000">//</span><span style="color: #008000"> 复制img文件</span>
gulp.task('img', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> gulp.src(paths.img.src)
    .pipe(gulp.dest(paths.img.dest));
})


</span><span style="color: #008000">//</span><span style="color: #008000"> 监听文件变化</span>
gulp.task('watch', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  gulp.watch(paths.pug.watch, gulp.parallel(</span>'pug'<span style="color: #000000">))
  gulp.watch(paths.less.watch, gulp.parallel(</span>'less'<span style="color: #000000">))
  gulp.watch(paths.js.watch, gulp.parallel(</span>'js'<span style="color: #000000">))
  gulp.watch(paths.img.watch, gulp.parallel(</span>'img'<span style="color: #000000">))
})

</span><span style="color: #008000">//</span><span style="color: #008000"> 默认任务，在命令行输入`gulp`来启动任务</span>
gulp.task('default', gulp.parallel('watch', 'browserSync', 'pug', 'less', 'js'))

gulp-pug这个插件是用来编译pug模板的，也就是以前的jade模板，pug模板是一个很强大的前后端通用的模板引擎，而且学习也很简单，具体用法可以看我另外一篇关于pug的教程文章——基于express+mongodb+pug的博客系统——pug篇。

大家知道gulp在监听任务的过程中，如果某个环节出了错误，gulp就会被中断，然后得重新启动gulp任务才行，这是一件很麻烦的事。这里可以通过gulp-notify和gulp-plumber两个插件来避免gulp任务中断。

4.生产环境配置

<span style="color: #0000ff">var</span> gulp = require('gulp'<span style="color: #000000">),
  del </span>= require('del'<span style="color: #000000">),
  pug </span>= require('gulp-pug'<span style="color: #000000">),
  less </span>= require('gulp-less'<span style="color: #000000">),
  cleanCSS </span>= require('gulp-clean-css'<span style="color: #000000">),
  base64 </span>= require('gulp-tobase64'<span style="color: #000000">),
  </span><span style="color: #008000">//</span><span style="color: #008000"> img64 = require('gulp-imgbase64'),</span>
  imagemin = require('gulp-imagemin'<span style="color: #000000">),
  babel </span>= require('gulp-babel'<span style="color: #000000">),
  uglify </span>= require('gulp-uglify'<span style="color: #000000">),
  rev </span>= require('gulp-rev'), <span style="color: #008000">//</span><span style="color: #008000"> 添加时间戳</span>
  revCollector = require('gulp-rev-collector'<span style="color: #000000">);


</span><span style="color: #0000ff">var</span> LessAutoprefix = require('less-plugin-autoprefix'<span style="color: #000000">),
  autoprefix </span>= <span style="color: #0000ff">new</span><span style="color: #000000"> LessAutoprefix({
    browsers: [</span>'last 2 versions'<span style="color: #000000">]
  });

</span><span style="color: #008000">//</span><span style="color: #008000"> 文件路径</span>
<span style="color: #0000ff">var</span> paths =<span style="color: #000000"> {
  pug: {
    src: </span>'src/pug/pages/*.pug'<span style="color: #000000">,
    dest: </span>'dist/html/'<span style="color: #000000">
  },
  less: {
    src: </span>'src/less/main.less'<span style="color: #000000">,
    dest: </span>'dist/css/'<span style="color: #000000">
  },
  js: {
    src: [</span>'src/js/**/*.js', '!src/js/lib/*.js'<span style="color: #000000">],
    dest: </span>'dist/js/'<span style="color: #000000">
  },
  img: {
    src: </span>'src/img/**/*'<span style="color: #000000">,
    dest: </span>'dist/img/'<span style="color: #000000">
  }
};


</span><span style="color: #008000">//</span><span style="color: #008000"> 将pug文件转换为html</span>
gulp.task('pug', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> gulp.src(paths.pug.src)
    .pipe(pug())
    .pipe(gulp.dest(paths.pug.dest));
});

</span><span style="color: #008000">//</span><span style="color: #008000"> 编译less文件</span>
gulp.task('less', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> gulp.src(paths.less.src)
    .pipe(less({
      plugins: [autoprefix]
    }))
    .pipe(base64({
      maxsize: </span>8<span style="color: #000000">
    }))
    .pipe(cleanCSS({
      compatibility: </span>'ie8' <span style="color: #008000">//</span><span style="color: #008000"> 兼容性前缀保留</span>
<span style="color: #000000">    }))
    .pipe(rev())
    .pipe(gulp.dest(paths.less.dest))
    .pipe(rev.manifest())
    .pipe(gulp.dest(</span>'rev/css'<span style="color: #000000">))
});

</span><span style="color: #008000">//</span><span style="color: #008000"> 压缩图片</span>
gulp.task('img', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> gulp.src(paths.img.src)
    .pipe(imagemin({
      optimizationLevel: </span>3<span style="color: #000000">,
      progressive: </span><span style="color: #0000ff">true</span><span style="color: #000000">,
      interlaced: </span><span style="color: #0000ff">true</span><span style="color: #000000">
    }))
    .pipe(gulp.dest(paths.img.dest));
});

</span><span style="color: #008000">//</span><span style="color: #008000"> 编译JS文件</span>
gulp.task('js', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span><span style="color: #000000"> gulp.src(paths.js.src)
    .pipe(babel({
      presets: [</span>'es2015'<span style="color: #000000">]
    }))
    .pipe(uglify())
    .pipe(rev())
    .pipe(gulp.dest(paths.js.dest))
    .pipe(rev.manifest())
    .pipe(gulp.dest(</span>'rev/js'<span style="color: #000000">));
});
</span><span style="color: #008000">//</span><span style="color: #008000"> 引用的外部 JS 库，不需要做压缩和打时间戳等处理</span><span style="color: #008000">
//</span><span style="color: #008000"> 所以直接复制就行</span>
gulp.task('copyJs', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span> gulp.src('src/js/lib/*.js'<span style="color: #000000">)
    .pipe(gulp.dest(</span>'dist/js/lib/'<span style="color: #000000">))
})

</span><span style="color: #008000">//</span><span style="color: #008000"> 替换加了MD5时间戳的文件</span>
gulp.task('rev', gulp.series(gulp.parallel('img64', 'less', 'js'), <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span> gulp.src(['rev/**/*.json', 'dist/html/*.html'<span style="color: #000000">])
    .pipe(revCollector({
      replaceReved: </span><span style="color: #0000ff">true</span><span style="color: #000000">
    }))
    .pipe(gulp.dest(paths.pug.dest));
}));
</span><span style="color: #008000">//</span><span style="color: #008000"> Clean 任务执行前，先清除之前生成的文件</span>
gulp.task('clean', <span style="color: #0000ff">function</span><span style="color: #000000">() {
  </span><span style="color: #0000ff">return</span> del('dist/'<span style="color: #000000">)
});

</span><span style="color: #008000">//</span><span style="color: #008000"> 默认任务，在命令行输入`gulp`来启动任务</span>
gulp.task('default', gulp.series('clean', gulp.series('img', gulp.parallel('rev', 'copyJs'))))

在生成环境中，代码需要压缩合并，另外在每次代码更新发布新版本时，为了用户客户端能下载更新代码，所以我们还需要给CSS和JS文件打上时间戳。

gulp-rev这个插件就专门给文件打MD5戳的，打完MD5戳之后，HTML文件里的引用当然也需要更改，如果每个都去手动更改肯定会是一件很麻烦的事，所以我们还需要gulp-rev-collector这个插件来帮我们替换打了MD5戳的文件。

gulp-imgbase64，这个插件可以指定html文件中，哪些img元素转换为base64，需要更加个性化转换的可以使用这个插件。

5.项目目录结构

XXX——

　　| — dist

　　　　| — html

　　　　| — css

　　　　| — img

　　　　| — js

　　　　　　| — lib

　　| — dev

　　　　| — html

　　　　| — css

　　　　| — img

　　　　| — js

　　　　　　| — lib

　　| — src

　　　　| — pug

　　　　　　| — components

　　　　　　| — pages

　　　　　　| — layout.pug

　　　　| — less

　　　　　　| — pages

　　　　　　| — main.less

　　　　　　| — reset.less

　　　　　　| — common.less

　　　　　　| — feature.less

　　　　| — img

　　　　| — js

　　　　　　| — lib

src文件夹里是主要的业务代码，这里面是需要长期维护的代码。

dev文件夹是开发时gulp生成代码的地方。

dist文件夹是生成时gulp生成代码的地方。

在这份配置里，我并没有像其他很多人那样，把开发时通过gulp生成的代码也放在src文件夹里，因为那样会造成很多引用上的麻烦，而且把开发和生产的代码环境都分开，能很好保持src文件夹里的纯净，不会有任何杂乱代码。

所以一些没经过gulp处理的文件，我会直接把它们复制到dev或者dist文件夹里对应的位置。

dist文件夹在每次gulp任务生成代码前都会被清空，所以我们不用关心dist文件夹里的内容。

而dev文件夹可能会有很多冗余文件，但我们也不需要担心它会对我们造成任何影响，文件删除或覆盖都不重要，只需要保证src文件夹里的文件正确即可。

 

以上是gulp实用配置（2）——中小项目的详细内容。更多信息请关注PHP中文网其他相关文章！