请教gulp的一点最佳实践

发布于
2016-01-05

最近在学习gulp的过程中遇到了关于插件管理的问题，恳请各位能提供一点儿思路
项目结构：

src里是源文件，打包入dist
这里用到metronic框架：admin中为页面层级和布局相关的js和css，global中为全局的js和css文件。plugins中有很多的jquery或bootstrap插件，如图：

我的问题是：利用gulp进行js\css压缩的最佳实践一般是怎样的？

我目前的做法是将所有js\css都分别打包成一个文件，即：
metronic_admin.min.css metronic_global.min.css metronic_admin.min.js metronic_global.min.js
这样做的问题是：
jq或bs插件都有自己的目录结构，我压缩之后必须保持这种目录结构否则会导致找不到图片或字体文件。这样也同时导致我需要检查每一个插件结构，针对特殊的插件在gulp写特殊的task。
还有更好的做法么？目前的做法我感觉不太好维护task的脚本代码（已用require-dir将task分类）~~(>_<)

ps:各位大大如果能提供一点gulp实践的资料将不胜感激

gulp

阅读 5.1k

4 个回答

得票最新

hjzheng

2.6k1314

发布于
2016-01-05

✓ 已被采纳

其实，我认为，还是通过bower管理依赖库比较好，然后再通过wiredep 自动引入比较好，另外你也可以覆盖配置，决定哪些需要哪些不需要。

https://github.com/Platform-CUF/use-gulp

funkyLover

2.2k136073

发布于
2016-01-05

这种情况,我比较倾向于手动整理插件的目录结构
毕竟你从网上下载或者通过bower等包管理器添加也好
很多情况下都是项目维护者在开发时的目录结构
比如一个jquery插件的目录下
除了我们最终需要的实现文件的js或css外
可能还有测试的js文件或其他我们根本不需要的文件
我一般会把最终需要的js/css/html文件提取出来再放到项目文件夹中

而我压缩之后必须保持这种目录结构,其实并不一定
在src的文件中可以使用占位符(一般我使用@@FILEURL)
然后用gulp-replace在跑不同任务的时候替换成不同的路径
例如在src下一个html文件有引用了一个外部文件

<script src="@@FILEURL/jquery.ui/pord.js"><script>

然后在gulp task中可以这样

gulp.task('html', function() {
  var fileUrl = '';//实际的文件夹路径
  return gulp.src('src/**/*.html')
        .pipe(replace('@@FILEURL'), fileUrl)
        .pipe(gulp.dest('build'));
});

当然这种做法只能用于一些通用文件夹路径,比如统一的静态资源文件的存放目录
如果要特殊处理的文件路径不多,也是可以考虑这种方法的