Question

最近我一直在研究Node.js.在这段时间里，我听到很多关于使用Gulp或Grunt作为构建工具的信息。现在我有兴趣学习如何使用Gulp。我听说它是一个构建工具，但我不确定所涵盖的内容。使用像Gulp这样的构建工具可以帮助我进行开发，我会做什么（什么样的任务）？一些例子会很好。

Answer 1

Gulp（和Grunt）允许任务自动化。

你发现自己在项目中反复做的任何事情都可以通过gulp及其插件实现自动化。如果你找不到一个能为你完成工作的插件，gulp只是一个nodejs应用程序，所以你可以快速编写自己的代码来完成这项工作。

就例子而言，由于我自己是一位有远见的网络开发人员，我会给你一些来自前端开发区的例子，但不要认为gulp只限于这个区域。所以这里有一些例子：

自动化您的构建过程（这里有一些子任务示例）
- 把你所有的项目html，js，css，连接它们并缩小它们
- 自动将依赖项注入您的html文件
监听文件更改并在文件更改时运行任务
- 每次添加js文件时，都需要将其添加到html文件中。这可以自动化
- 每次保存要在其上运行jshint的JavaScript文件时，都要警告错误
- 每次保存CoffeeScript文件时，您都希望将其自动转换为javascript文件，并将该javascript文件包含在您的html文件中
自动删除文件
成千上万的其他事情

专门针对JavaScript构建工具（与Java的Ant或Rails＆Rake）相比，您获得的另一个有趣的好处是，大多数Web应用程序都使用JavaScript。因此，如果您的后端是Java或Rails或C ++ ...您的前端人员总是在JavaScript下欢欣鼓舞。这意味着，无论您使用何种语言，您仍然使用JavaScript ...这使得像gulp这样的工具非常有趣，因为任何Web开发团队都可以保证JavaScript和JavaScript经验存在。

我想我会及时更新，以便更清楚。在那之前看看：

http://gulpjs.com/plugins/了解一些您可以通过gulp轻松获得的功能。

这是一个快速的代码示例，即一个gulp任务，它可以获取项目的图像，然后将它们移动到dist文件夹中：

gulp.task('images', ['clean'], function () {
  return gulp.src('/src/assets/images/**/*')
    .pipe(gulp.dest('dist/assets/images/'));
});

任务可以链接在一起并依赖于彼此。注意任务＆＃39;图像＆＃39;取决于＆＃39; clean＆＃39; 。这意味着，如果你想运行图像＆＃39;你的＆＃39;清洁＆＃39;任务将自动调用之前。这允许您将任务链接在一起，以实现非常强大的可重用任务序列。这是一个如何清理＆＃39;可能看起来像：

gulp.task('clean', function (done) {
  del(['/dist'], done);
});

这是我通过谷歌搜索找到的随机页面。它包含一个非常清晰的coffeescript文件，其中包含前端项目中的gulp自动化任务示例：http://pem-musing.blogspot.ca/2014/02/a-gulp-of-coffee-your-gulpfile-in.html

希望这有帮助

Answer 2

Gulp JS是一个基于Javascript的工具，可让您自动完成工作流程的任务。自动化可以从字面上增加您的产量。无论您是开发人员还是偶尔创建HTML线框的设计人员，我们都建议深入研究。

http://www.jshive.com/getting-started-gulp-task-runner/

Answer 3

构建工具是应用程序开发的资产。几年前，项目经理常常在开发人员后面跑，要求他们清理代码，提取代码，提高应用程序的性能等。

开发人员通常的运作方式是复制“发展＆＃39; 生产环境的环境代码，并执行所需的操作。开发人员会使用有助于清理代码的第三方软件或应用程序，例如删除不必要的注释，缩小文件的整体大小，从而减少应用程序，连接文件以减少服务器的点击次数，执行单元测试，仅举几例。

Gulp和Grunt所做的构建系统是在几秒钟内自动完成上述所有任务。这些构建系统具有特定的插件，可以进行连接，缩小，linting，特定于环境的开发等。所有这些任务一次性执行所需的操作，然后从新形成的生产代码运行应用程序。

使用构建系统的优势在于它可以更大程度地加快应用程序的页面加载时间。您的代码更清晰，尺寸更小，同时遵循最佳编码惯例。反过来，您可以节省大量时间，这些时间用于执行上述每项任务。

它们非常易于使用，应该在应用程序开发中使用。 :-)

JavaScript构建工具的目的是什么？

3 个答案: