Grunt VS Gulp

2024-08-27 13:48
文章标签 vs gulp grunt

本文主要是介绍Grunt VS Gulp,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前期准备
  • windows7
  • node
  • ruby
  • sass+compass

grunt篇

新建一个grunt_demo 目录,用compass 创建一个项目

  mkdir grunt_demo
cd grunt_demo
compass init

stepOne打开CMD,安装grunt-cli到全局环境

npm install -g grunt-cli

stepTwo

注意,安装grunt-cli并不等于安装了 Grunt!Grunt CLI的任务很简单:调用与Gruntfile在同一目录中 Grunt。这样带来的好处是,允许你在同一个系统上同时安装多个版本的 Grunt。

在根目录下新建一份Gruntfile.js和package.json 接着安装grunt和grunt插件,这个demo主要目标是做一个编译compass并自动刷新浏览器的demo,需要用到组件 :

  • grunt
  • grunt-contrib-compass
  • grunt-contrib-watch
  • grunt-browser-sync

    安装命令:

    npm install grunt grunt-contrib-compass grunt-contrib-watch grunt-browser-sync --save-dev

    stepThree

安装好之后的package.json是这样的:

{
"name": "grunt_demo", "version": "1.0.0", "description": "grunt demo", "main": "index.html", "repository": { "type": "git", "url": "https://github.com/Janking/blog" }, "author": "Janking", "license": "ISC", "bugs": { "url": "https://github.com/Janking/blog/issues" }, "homepage": "https://github.com/Janking/blog", "devDependencies": { "grunt": "^0.4.5", "grunt-browser-sync": "^1.5.3", "grunt-contrib-compass": "^1.0.1", "grunt-contrib-watch": "^0.6.1" } }

接着就是关键的Gruntfile.js文件

module.exports = function(grunt) { // 1. 所有的配置将在这里进行 grunt.initConfig({ compass: { dist: { options: { config: 'config.rb' } } }, watch: { compass: { files: 'sass/{,*/}*.scss', tasks: ["compass:dist"] } }, browserSync: { dev: { bsFiles: { src: ['stylesheets/{,*/}*.css','*.html','js/{,*/}*.js'] //监听改变的文件,可以是js,html,css等等 }, options: { watchTask: true, // < VERY important server:{ baseDir: "./" } } } } }) // 2. 我们在这里告诉grunt我们将使用插件 grunt.loadNpmTasks('grunt-contrib-compass'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-browser-sync'); // 3. 执行 grunt.registerTask('default', ["browserSync", "watch"]); //当在命令行中敲入 grunt,默认执行default //你还可以自定义命令,如 //grunt.registerTask('compass', ["compass"]);  //命令行: grunt compass }

详细的Gruntfile配置教程可以参考这里:http://www.gruntjs.net/

grunt的工作流程:读文件、修改文件、写文件、读文件、修改文件、写文件.....如果compass还要合并雪碧图的话,grunt的耗时就更长了,我试过最长需要2s,接下来我们试试gulp!

compare

gulp篇

新建一个gulp_demo 目录,用compass 创建一个项目

  mkdir gulp_demo
cd gulp_demo
compass init

打开CMD,安装gulp到全局环境

npm install gulp -g

创建package.json ,命令行中输入npm init,按照提示敲完即可 再将gulp和需要用到的组件安装在本地项目中

npm install gulp-compass browser-sync --save-dev

安装完毕,package.json文件如下所示:

{
"name": "gulp_demo", "version": "1.0.0", "description": "gulp demo", "main": "index.html", "repository": { "type": "git", "url": "https://github.com/Janking/blog" }, "author": "Janking", "license": "ISC", "bugs": { "url": "https://github.com/Janking/blog/issues" }, "homepage": "https://github.com/Janking/blog", "devDependencies": { "browser-sync": "^1.8.1", "gulp-compass": "^2.0.3" } }

gulp所需要的组件比grunt要少一个 :)

然后在根目录上新建gulpfile.js文件,配置如下:

var gulp = require('gulp'); var compass = require( 'gulp-compass' ); var browserSync = require("browser-sync"); var reload = browserSync.reload; gulp.task('compass', function() { gulp.src('sass/*.scss').pipe(compass({ config_file: './config.rb', css: 'css', sass: 'sass' })).pipe(reload({stream:true})); }); gulp.task('browser-sync', function() { browserSync({ server: { baseDir: "./" } }); }); gulp.task('normal', function() { gulp.src(['*.html']).pipe(reload({stream:true})); }); // 在命令行中运行 gulp,默认执行 default,你也可以自定义其他命令 gulp.task('default', ['compass', 'browser-sync','normal'], function () { gulp.watch(['./sass/{,*/}*.scss'], ['compass']); gulp.watch(['./*.html','./css/{,*/}*.css','./js/{,*/}*.js','./images/{,*/}*.{png,jpg}'],['normal']); });

gulp的工作流程:文件流--文件流--文件流......因为grunt操作会创建临时文件,会有频繁的IO操作,而gulp使用的是流操作,一直是在内存中处理,直到输出结果。 因此gulp在效率上确实远胜grunt,并且学习成本不高,在这非常感谢刘剑辛的分享!

运行结果

resultresult

 

demo:https://github.com/Janking/blog 如果要运行demo,先执行下面这些命令

npm install
#如果你未安装grunt-cli或gulp,请先全局安装#
npm install -g grunt-cli npm install -g gulp

这篇关于Grunt VS Gulp的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1111840

相关文章

Android平台播放RTSP流的几种方案探究(VLC VS ExoPlayer VS SmartPlayer)

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候,不知道如何选的好,本文针对常用的方案,做个大概的说明: 1. 使用VLC for Android VLC Media Player(VLC多媒体播放器),最初命名为VideoLAN客户端,是VideoLAN品牌产品,是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式,并支持DVD影音光盘,VCD影

VS Code 调试go程序的相关配置说明

用 VS code 调试Go程序需要在.vscode/launch.json文件中增加如下配置:  // launch.json{// Use IntelliSense to learn about possible attributes.// Hover to view descriptions of existing attributes.// For more information,

解决服务器VS Code中Jupyter突然崩溃的问题

问题 本来在服务器Anaconda的Python环境里装其他的包,装完了想在Jupyter里写代码验证一下有没有装好,一运行发现Jupyter崩溃了!?报错如下所示 Failed to start the Kernel. ImportError: /home/hujh/anaconda3/envs/mia/lib/python3.12/lib-dynload/_sqlite3.cpython-

VSC++: 括号对称比较

括号的使用规则:大括号,中括号,小括号{[()]};中括号,小括号[()];小括号();大括号、中括号、小括号、中括号、小括号、大括号{[()][()]};大括号,中括号,小括号,小括号{[(())]};大括号,中括号,小括号,小括号{[()()]};小括号不能嵌套,小括号可连续使用。 {[]}、{()}、([])、({})、[{}]、{}、[]、{[}]、[(])都属非法。 char aa[

Apache Kylin VS Apache Doris全方位对比

1 系统架构 1.1 What is Kylin1.2 What is Doris2 数据模型 2.1 Kylin的聚合模型2.2 Doris的聚合模型2.3 Kylin Cuboid VS Doris RollUp2.4 Doris的明细模型3 存储引擎4 数据导入5 查询6 精确去重7 元数据8 高性能9 高可用10 可维护性 10.1 部署10.2 运维10.3 客服11 易用性 11.1

vs环境下C++dll生成和使用

动态库和静态库: 动态库:全名动态链接库,用于将你的函数封装,让别人只能调用,不能看你的实现代码。由引入库和dll组成:引入库包含导出的函数和变量名,dll包含实际的函数和数据,运行时加载访问dll文件。  Windows API中的所有函数都封装在dll里面,最重要的三个: Kernel32.dll:包含管理内存、进程和线程的各个函数。User32.dll:包含用于执行用户界面任务,如窗口和

VS Code与SVN关联

VS Code是一款轻量级的集成开发环境,可通过安装插件与SVN进行关联。以下是将VS Code与SVN关联的步骤: 安装SVN插件:在VS Code中打开Extensions(快捷键:Ctrl+Shift+X),搜索并安装"svn"插件。 安装SVN命令行工具:在计算机上安装SVN命令行工具,确保在命令行中可以运行svn命令。 配置SVN路径:在VS Code中打开用户设置(快捷键:Ct

学习记录-VS踩坑记录

一、安装VS2015后,CMAKE执行错误: CMAKE_C_COMPILER-NOTFOUND" was not found.   CMAKE_CXX_COMPILER-NOTFOUND" was not found.  环境: 1.公司内网,无法上外网; 2.文件加密系统; 3.数字公司杀毒软件; 解决方法: 清理环境,添加USBwifi,安全模式卸载数字软件; 1.设置环

面试题41:和为s的两个数VS和为s的连续正数数列

问题说明: 1.和为s的两个数问题是从一个排序的数组中找出和为s的两个数; 2.原题是找出一个即可,现在全部找出; 3.和为s的连续正数数列是给定一个数找出所有连续正数数列的和为s,例如s为9,(2,3,4)就是其中一组。 (一)和为s的两个数问题 public static int findNumbersWithSum(int[] sorted, int fromIndex, in

vs中使用c#\sqlite数据库开发(1)

开发前: 之前在java开发中使用过sqlite,对它有些印象。在用winform或wpf开发小应用程序时,发现用sqlite数据库也是不错的。就像一个会员管理软件,开发完毕后,可以省去想sqlserver那些复杂的操作。软件安装时,不需要额外的数据库环境。简单、便捷。但对于大并发量、大数据量的开发就不要使用sqlite了。如果你用过h2数据库,可以对比一下两者的优劣。 开发前准备: 1.下