使用 Bower 和 Gulp 的命名约定和文件放置答案

【问题标题】：Naming conventions and file placement using Bower and Gulp使用 Bower 和 Gulp 的命名约定和文件放置
【发布时间】：2015-07-05 22:35:57
【问题描述】：

我最近才开始与 Bower 和 Gulp 合作。我有一个 bower.json 列出我的依赖项，一个 gulpfile.js 包含字体、css、js 等任务，还有一个 package.json 列出 gulp 依赖项等等。

我只有那些受版本控制的文件，并且作为测试检查了其他地方的存储库并设法安装 gulp 和 bower 依赖项，并使用 gulp 构建所有内容。然后我有目录bower_components、node_modules 和build，它们是由 gulp 创建的。

现在放置我自己的代码的正常位置是什么？我是否应该简单地在项目的根目录中创建另一个目录，src 或app 左右，然后让 gulp 缩小它等并将其放在build 目录中？

是否有任何我应该注意的命名约定？

所以，我当前的目录结构是：

根
- bower_components
  - bootstrap、bootswatch、jquery、...
- node_modules
  - gulp，gulp-*，...
- 构建
  - 资产
    - css、字体、img、js、...
- bower.json
- gulpfile.json
- package.json

【问题讨论】：

无...随意使用任何一个 :) src 和 app 是常见的，但取决于您所在的社区（Google 使用 app 作为应用程序和dist 用于构建文件）
似乎你在正确的轨道上......创建你的工作目录（或 src）文件夹应该很酷 - 只需确保更新你的 gulpfile.js 以查看 src 中的那些文件夹。如果您发布当前的文件夹结构，我可能会提供更多帮助。
@r00k 我包含了我当前的目录结构。然后我将添加另一个目录src 并编辑 gulpfile。

标签： node.js build npm gulp bower

【解决方案1】：

好的，如果你要添加一个（src）目录到根目录，你的结构看起来像这样

|src

|-src/img

|-src/js

|-src/less-css

你的“监视”任务可能看起来像这样

    gulp.task('watch', function() {

  // Watch .less files
  gulp.watch('./src/less/**/*.less', ['styles']);

  // Watch .js files
  gulp.watch('./src/js/**/*.js', ['scripts']);

  // Watch image files
  gulp.watch('./src/img/*', ['images']);

  // Create LiveReload server
  // livereload.listen();  // only if you use livereload

  // Watch any files in dist/, reload on change
  gulp.watch(['assets/**']).on('change', livereload.changed);

});

当从该项目的目录运行gulp watch 时，将注意到对上述路径中列出的文件的任何更改，并且更改将从 src 构建到您的“构建”文件夹中（取决于您如何设置 gulp 的其余部分文件）

但正如 ddprrt 所提到的，它确实是社区偏好您如何命名您的源目录。

【讨论】：