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

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/'));
});

任务可以链接在一起并依赖于彼此.注意任务"图像"如何依赖于"干净".这意味着如果你想运行"图像",你的"干净"任务将自动被调用.这允许您将任务链接在一起,以实现非常强大的可重用任务序列.以下是"干净"的样子:

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

希望这可以帮助