会不会Grunt都不要慌,你还有Gulp
发布在任务运行器Gulp研究2014年1月9日view:5764
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

enter image description here 当提到JavaScript任务运行器时,Grunt是当之无愧的霸主,至少现在还是。2013年的早些时候,Fractal voiced的一个团队专注的研究了Grunt并且提出了一个非常好的想法,它继承了Grunt的优点并进行了重建。他们把这个项目命名为gulp,尽管gulp解决了许多Grunt也能解决的问题,但是它们的底层还是有许多不同之处。我们现在就来看看gulp和grunt质检独有哪些不同。

什么是任务运行器

你之前可能对Grunt比较熟悉也可能不熟悉,因此我们在这里先快速的回顾一下神峨眉是JavaScript任务运行器。

任务运行器是一个小应用,它用来自动执行你在项目开发中遇到的许多耗时又无聊(但是非常重要)的任务。这些任务包括运行测试,拼接文件,精简文件以及CSS预处理。通过简单的创建一个任务文件,你可以指示任务运行器来自动运行任何开发中的任务,而无需你从开发过程中分心来管这些事。这是一个非常好的注意,它为你节省了大量的时间并让你专注于开发本身。

Gulp与Grunt的不同点

现在我们回归主题,你可能会问:“gulp和grunt究竟有什么不同,为什么我要使用gulp?”

Gulp是一个流构建系统能够。在此我们将不会深入的去讲述流,如果你感兴趣的话,这里有一篇非常好的文章帮你了解细节。

简单来说,流让你能更好的控制工作流程并且让你从某个临时文件或文件夹中解脱出来。使用gulp,你放入一个文件然后获得一个文件输出。一切就是这么简单。

插件

当涉及到扩展功能时,gulp的理念是每一个插件应当只执行一个动作。Gulp非常简单地将插件连接组织起来。插件和核心功能之间不会发生分享或是冲突的问题。

是代码不是配置

Gulp最大的好处在于你的gulp文件是代码 – 而不是配置。由于gulp遵循CommonJS标准,如果你熟悉Node,gulp的一切显得那么似曾相识。gulp的代码更加干净,更容易阅读,因为它使用一种你更加熟悉的方式组织,因此也更容易编写。

一个例子

学习最好的方式莫过于查看一些代码了,我们在这里会看几个例子。在下面的代码中我们将设置一个gruntfile文件和一个gulpfile文件,目的是拼接并精简我们项目中的JavaScript文件。并且我们还将分别使用grunt和gulp来监视文件变化并及时运行任务。

首先我们编写一个gruntfile文件,然后我将编写一个具有完全相同的功能的gulpfle文件。你将从中看到gulp是多么的不可思议并且在grunt的基础上做了哪些改进。

gruntfile.js

module.exports = function(grunt){
    grunt.initConfig({
        concat: {
            'dist/all.js': ['src/*.js']
        },
        uglify: {
            'dist/all.min.js': ['dist/all/js']
        },
        jshint: {
            files: ['gruntfile.js','src/*.js']
        },
        watch: {
            files: [<%= jshont.files =%>],
            tasks: ['jshint','concat','uglify']
        }
    });  

    //载入我们的插件    

    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');  

    //注册默认任务   
    grunt.registerTask('default',['jshint','concat','uglify']);
}   

下面是gulpfile:

gulpfile.js

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');   

//Lint JS   

gulp.task('lint',function(){
    gulp.src('./src/*js')
            .pipe(jshint())
            .pipe(jshint.reporter('default'));
});

//concat & minify JS  

gulp.task('minify',function(){
    gulp.src('./src/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist'))
    .pipe(rename('all.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist'));
});  

//Default   

gulp.task('default',function(){
    gulp.run('lint','minify');
});

//监视JS文件

gulp.task('./src/*.js',function(event){ gulp.run('lint','minify'); });

你可能已经注意到我们需要相同数量的插件,但是其中两个虽然做的事情相同但是却不是同样的插件。这也在一定程度上显示了上面提到的插件的不同。

使用gulp我们不需哟啊包含一个watch插件因为watch是一个gulp的核心功能 – 因此没有必要使用插件。这个你所期望的功能被内置到了gulp中 – 而不是以插件的形式出现。

另外,使用grunt时重命名以及精简文件都由uglify插件完成。一个插件要同时负责精简文件并重名名两个任务。但是在gulp中,所有的插件都只有一个任务 – 一个单一的职责。为了重命名我们精简后的文件,我们可以轻松的包含gulp-rename插件并且将它包含在我们精简任务的管道链中。

总结

最终选择使用Grunt还是Gulp,完全看你个人的喜好。虽然这种"node-like"的编写文件方式使得gulp看起来很酷,但是grunt也很不错。使用任务运行器将会为你节省大量的时间和精力, 相信gulp一定会让你事半功倍的轻松完成任务。


本文译自No Need To Grunt, Take A Gulp Of Fresh Air,原文地址http://travismaynard.com/writing/no-need-to-grunt-take-a-gulp-of-fresh-air

如果你觉得本文对你有帮助,请点击下面的链接为我提供赞助

点击这里为我提供赞助

评论
发表评论
暂无评论
WRITTEN BY
张小俊128
Intern in Baidu mobile search department。认真工作,努力钻研,期待未来更多可能。
TA的新浪微博
PUBLISHED IN
任务运行器Gulp研究

关于任务运行器Gulp的研究文章

我的收藏