未加星标

Gulp vs Grunt Comparing Both Automation Tools

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

Automation tools are great for saving time and avoiding human error. They allow us to offload mundane tasks and can usually end up doing these tasks faster and with better precision. Two tools that are known to be quite effective in performing automated tasks are Gulp and Grunt . In this post, we’re going to go over exactly what Gulp and Grunt are used for as well as compare both tools to see which differences and similarities they share.

What Can Grunt and Gulp Do?

Before tackling the issue of Grunt vs Gulp, you may be wondering exactly what these tools do and why you might want to use either. As mentioned above, both Grunt and Gulp exist to help automate functions and are popular tools amongstweb developers and designers.

Using a website designer as an example, common tasks for this position include debugging code, concatenating and minifying CSS and javascript files ,compressing images and applying changes to a server or files on the server. Many of these tasks are simple, but they can be very time-consuming. This is especially true with a large website or one that requires frequent changes and updates. Someone could be assigned to handle these tasks, but since they’re fairly basic, the individual doing them could probably be doing more productive tasks. This is where Grunt or Gulp come in.

Using a bit of fairly simple code, plugins and either Gulp or Grunt, you can set up a process that automates tasks. Both of these tools allow you to check for new files or changes to files in certain directories and to run tasks applicable to them. In other words, once you’ve set up the processes you want and applied them to your existing files, any new or modified files can automatically have processes applied to them as well.

For instance, let’s say you set up a process that compresses jpg files in the images directory. Once you run the process, all images have EXIF data removed from them and are compressed. Once you have Gulp or Grunt properly installed and configured, the image compression task code for each tool would look similar to the following:

Gulp gulp.task('jpgs', function() {
return gulp.src('src/images/*.jpg')
.pipe(imagemin({ progressive: true }))
.pipe(gulp.dest('optimized_images'));
}); Grunt imagemin: {
jpgs: {
options: {
progressive: true
},
files: [{expand: true,cwd: 'src/img',src: ['*.jpg'],dest: 'images/'
}]
}
}

If you’ve also set up Gulp or Grunt to check for new or updated files, any edited files or new files saved to the directory will also be compressed and have EXIF data removed automatically.

While this task could have been done by hand, Gulp or Grunt can do it automatically , and in cases of large batches of files, they can do it in a fraction of the time that they could be done manually.

Gulp vs Grunt: How Are They Similar?

Now that you have an idea of what Gulp and Grunt can do, we’ll discuss how they do what they do. Both tools are task runners that use Node.js , which is an open-source Javascript runtime environment used to develop tools and applications. Grunt and Gulp both also use plugins to accomplish whatever tasks you need them to automate for you.

Both tools use .js files to build tasks; for Grunt, you use a Gruntfile.js , and for Gulp, you use a Gulpfile.js . You can also define flows with grunt.task and gulp.task instead of using a function.

Some of the most common tasks that either tool can accomplish and/or automate include:

Compressing image files Eliminating debugger and console statements from scripts Minifying, concatenating, and cleaning up CSS and JavaScript Linting code for errors Compiling LESS files Running unit tests Sending updates to a production server Updating databases

However, thanks to the ability for anyone to write plugins, which there are thousands of for both Gulp and Grunt, there are a variety of other processes that these tools can automate. Things like maintaining WordPress themes, batch renaming files, adding attributes to XML-based documents and comparing source and destination files are all tasks that can be handled by either of these tools.

Gulp vs Grunt: What Are The Major Differences?

While both tools can perform many of the same tasks, the major differences when comparing Grunt vs Gulp are how they accomplish them. The first significant difference is that Gulp has been designed to use a series of plugins that each do a task. Each plugin for Gulp is written with the goal of doing one thing very well. At the time of writing this article, the Gulp plugin registry contained 2,774 different plugins for various purposes.


Gulp vs Grunt   Comparing Both Automation Tools

Grunt, on the other hand, uses plugins that often accomplish multiple tasks at the same time . This means that the plugin creation process is very different depending on which tool you’re using. Additionally, at the time of writing this article, the Grunt plugin registry contained 6,013 plugins, a considerable amount more than Gulp.


Gulp vs Grunt   Comparing Both Automation Tools

Another difference is that Grunt uses data configuration files that are similar to JSON , whereas Gulp employs JavaScript, which tends to be easier to write. Gulp code is often much shorter than Grunt code, and part of this is because you have to declare source and destination files for every task in Grunt. That said, once you’ve set up your automated processes, this may not be a big issue for you either way.

However, if you’re working on a large project, Grunt code length may start to become a headache. Once a build flow has been used for a while, it may get longer and more complicated. This can make it difficult to add new tasks without either duplicating something that’s already being done or putting a task in the correct order. Making the order of operations confusion worse, is the fact that tasks are configured declaratively in Grunt. This can be attenuated by ensuring that individuals working on automation tasks keep things clear and split up tasks before they become overly complex.

Both systems allow you to automatically run tasks when files are added to a directory or when charges are made to the files in a directory, but you’re required to install and run the watch plugin for this feature to operate in Grunt. Gulp has built-in processes for watching data files. While many don’t consider this to be an issue since the results are the same, some users find the lack of an innate file watcher in Grunt to be a drawback.

Gulp vs Grunt: Speed Gulp has a major advantage when it comes to speed, but the advantage may not be that significant, and updates to Grunt have done a lot to reduce the speed difference. The reason for Gulp’s current speed advantage is down to the fact that Gulp u

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: GruntGulpJavaJavaScriptCSSXMLNode.jsWord
分页:12
转载请注明
本文标题:Gulp vs Grunt Comparing Both Automation Tools
本站链接:http://www.codesec.net/view/524051.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(54)