使用 WebPack gulp 。哪个应该构建我的咖啡/ Jade 等?

标签 gulp webpack webpack-dev-server

我有一个当前正在使用 gulp 的现有项目。

关键的库/框架/语言是:

  • MongoDB - Mongoose
  • AngularJS - 使用 ui-router,也使用 ngClassify
  • ExpressJS - 带护照
  • 节点
  • Jade
  • CoffeeScript
  • Sass - '.sass' 格式
  • JPG/PNG

目前一切都使用实时重新加载观看,使用 uglify 和 gzip 压缩。我的角度 html View /指令片段被发送到模板缓存 js 文件中。甚至图像都使用 image min 进行了缩小。

单页应用程序在设计上是非常模块化的,应用程序有多个“页面”,每个页面都有特定的用途(以个人资料页面为例),使用 ui-route 嵌套 View 。并非所有用户都会使用每个页面。因此,为什么我选择转向 WebPack,每个“页面”都是一个模块。此应用程序的目标是尽可能地响应。在切换他们所在的页面/模块时可能会出现轻微加载时间。

我当前的项目结构有一个 src 和 dist 目录,每个目录都有一个服务器和客户端文件夹。列表目录当然可以在每次构建时安全地删除。我目前没有原始 js 文件或原始 html(除了只需要我的 gulpfile.coffee 的 gulpfile.js 之外),所有内容都由 gulp 预处理,仅此而已。

所以这是我的问题:

  1. 我是否将大部分 gulpfile 替换为 webpack,并让 webpack 处理所有内容(这样做有什么好处)?或者我是否创建一个中间文件夹(gulp 输出),然后在该文件夹上运行 webpack(只处理缩小的 js/css/html 文件)。基本上,了解我的库/框架是什么以及我的情况后,您将如何构建构建过程?
  2. 可以使用 ngClassify app.coffee 文件作为入口点吗?还是必须先编译。 (如果可以,怎么做?)

最佳答案

您当然可以使用 Gulp to trigger your Webpack build 并管理您可能拥有的其他任务,但是 Webpack 的想法是它是您的整个构建,您不再像 Webpack 那样需要 Gulp 任务来“缩小”、“连接”和“imagemin”文件等所有这些都可以通过使用 PluginsLoaders 来实现。

您必须在项目源上运行 Webpack,而不是您的自定义 Gulp 构建创建的已经缩小的包。

恐怕我没有答案的角度问题:)

关于使用 WebPack gulp 。哪个应该构建我的咖啡/ Jade 等?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30756066/

相关文章:

javascript - 带有 ngrok 的 webpack-dev-server 4

webpack-dev-server - 如何使用 Gatsby 和自定义 Webpack 配置进行代理 (netlify-lambda)

javascript - AWS Amplify 入门教程中使用 JavaScript 的 Webpack 服务器无法工作

javascript - gulp-rigger 的选项

typescript 、AMD 和模块名称

javascript - 使用 Gulp 将 Handlebars 模板预编译为单独的 JST (.js) 文件

javascript - onchange() 函数未定义(无法从index.html访问?)

javascript - 无法让 gulp-rev-replace 与 gulp-useref 一起使用

javascript - 如何在 Express、React、Webpack、SSR 应用程序中的客户端和服务器之间共享常量

javascript - 如何在 Webpack 中创建多个页面?