node.js - 使用 Bower 和 Gulp 的命名约定和文件放置

Question

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

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

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

有什么我应该注意的命名约定吗？

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

• 根
  • bower_组件
    • bootstrap、bootswatch、jquery、...
  • Node 模块
    • gulp ， gulp -*，...
  • 构建
    • Assets
      • css、字体、img、js、...
  • bower.json
  • gulpfile.json
  • package.json

Answer 1

好的，如果您要向根目录添加一个 (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 构建到您的“build”文件夹中(取决于您如何设置 gulp 文件的其余部分)

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