快捷導(dǎo)航

node.js中g(shù)runt和gulp的區(qū)別詳解

更新時(shí)間：2017年07月17日 17:10:25 投稿：lqh

這篇文章主要介紹了node.js中g(shù)runt和gulp的區(qū)別詳解的相關(guān)資料,需要的朋友可以參考下

node.js中g(shù)runt和gulp的區(qū)別詳解

自nodeJS登上前端舞臺(tái)，自動(dòng)化構(gòu)建變得越來(lái)越流行。目前最流行的當(dāng)屬grunt和gulp,這兩個(gè)光看名字挺像，功能也差不多，不過(guò)gulp能在grunt這位大哥如日中天的境況下開(kāi)辟出自己的一片天地，有著她獨(dú)到的優(yōu)點(diǎn)。

易用 Gulp相比Grunt更簡(jiǎn)潔，而且遵循代碼優(yōu)于配置策略，維護(hù)Gulp更像是寫(xiě)代碼。
高效 Gulp相比Grunt更有設(shè)計(jì)感，核心設(shè)計(jì)基于Unix流的概念，通過(guò)管道連接，不需要寫(xiě)中間文件。
高質(zhì)量 Gulp的每個(gè)插件只完成一個(gè)功能，這也是Unix的設(shè)計(jì)原則之一，各個(gè)功能通過(guò)流進(jìn)行整合并完成復(fù)雜的任務(wù)。例如：Grunt的imagemin插件不僅壓縮圖片，同時(shí)還包括緩存功能。他表示，在Gulp中，緩存是另一個(gè)插件，可以被別的插件使用，這樣就促進(jìn)了插件的可重用性。目前官方列出的有673個(gè)插件。
易學(xué) Gulp的核心API只有5個(gè)，掌握了5個(gè)API就學(xué)會(huì)了Gulp，之后便可以通過(guò)管道流組合自己想要的任務(wù)。
流使用Grunt的I/O過(guò)程中會(huì)產(chǎn)生一些中間態(tài)的臨時(shí)文件，一些任務(wù)生成臨時(shí)文件，其它任務(wù)可能會(huì)基于臨時(shí)文件再做處理并生成最終的構(gòu)建后文件。而使用Gulp的優(yōu)勢(shì)就是利用流的方式進(jìn)行文件的處理，通過(guò)管道將多個(gè)任務(wù)和操作連接起來(lái)，因此只有一次I/O的過(guò)程，流程更清晰，更純粹。
代碼優(yōu)于配置 維護(hù)Gulp更像是寫(xiě)代碼，而且Gulp遵循CommonJS規(guī)范，因此跟寫(xiě)Node程序沒(méi)有差別。

一個(gè)簡(jiǎn)單的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() {
  return gulp.src('src/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
  });

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

  // Watch Our Files
  gulp.task('watch', function() {
    gulp.watch('src/*.js', ['lint', 'minify']);
  });

  // Default
  gulp.task('default', ['lint', 'minify', 'watch']);

以上就是node.js中g(shù)runt和gulp的區(qū)別的講解，如果大家有疑問(wèn)請(qǐng)留言或者到本站社區(qū)進(jìn)行討論交流，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: