给那些认为Grunt奇怪又难懂的人看的Grunt教程

2023-10-27 20:38

本文主要是介绍给那些认为Grunt奇怪又难懂的人看的Grunt教程,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

http://www.html-js.com/article/Grunt-use-for-those-who-believe-that-the-Grunt-strange-and-difficult-to-see-the-Grunt-tutorial

前端工程师经常会被要求做下面这些事:

  • 每次编写一小段CSS和JavaScript,然后在最后把它们拼接起来
  • 压缩你的CSS和JavaScript使得它们的文件尺寸尽可能小
  • 优化你的图片,在不损害图片质量的前提下减少文件尺寸
  • 使用Sass来比那些CSS,使用它其中内置的有用的抽象

这些东西做起来并不容易,但是其中的一些是我们必须要去做的。你可能将它们成为任务。

我敢保证你肯定听说过Grunt,Grunt是一个任务运行器。Grunt可以为你做所有的事情。一旦你设置完成 – 这个设置过程并不困难 – 这些事情就会自动完成而无需你再去考虑。

但是我们必须面对一个事实:Grunt是那些酷小孩在使用的新鲜玩意但是第一眼看上去会感到很陌生甚至有点可怕。我听说了这些事情。因此这篇文章就是为你而写的。

首先来消除一些错误的观念

也许你已经听说过了Grunt,但是还没有用它做过任何事。我相信很多人都有这样的情况。也许下列情形的其中一条就发生在你的身上:

我不需要Grunt能做的这些事情

实际上,你真的可能需要。检查一下文章开头的的清单,这些事情做起来可不轻松。它们对于如今的网站开发来说都是至关重要的。如果你已经做过所有的事情,那么非常好。也许你使用了其他不同的工具来帮助你完成任务。Grunt可以帮助你一次性解决所有问题。所以说,如果你准备完成所有的事情,你也许应该使用Grunt来帮助你。然后,一旦你开始做这些事情,你可以持续使用Grunt来为你完成更多的事情,这常常会使你在工作中事半功倍。

Grunt运行在Node.js中 – 但是我不懂Node

你玩全不需要动Node。就像你不需要懂得Ruby就可以使用Sass一样。或者不懂PHP就可以使用Wordpress。或者不懂C++就可以使用Microsoft Word。

我可以使用其他工具来完成Grunt能帮我做的事

那些工具可以在一个地方组织多有任务,配置并且在需要的时候运行吗?可以在一个项目中的所有人之间分享任务吗?我打赌,这不太可能。

Grunt要使用命令行 – 我只是一个设计师

我也是一个设计师。我更加倾向于使用有图形界面的团建。但是我并不认为这些将发生在Grunt身上。

你需要使用的命令行仅仅是下面几条:

1.进入你项目所在的目录。

2.输入grunt并按下回车。

在设置完成之后,这些事情看起来并不困难。

好的,现在来安装Grunt

Node是Grunt能够运行的前提条件。如果你没有安装Node,不要担心,它非常简单。你只需要下载安装器并且运行它。点击Node网站上的大大的Install按钮即可。

你需要在每一个项目中安装Grunt。进入你的项目文件夹。它需要一个叫做package.json的文件位于根目录下。你可以创建一个并且将它放在那。

这个文件的内容应该是这样的:

{"name": "example-project","version": "0.1.0","devDependencies": {"grunt": "~0.4.1"}
}   

你可以随意改变项目名称和版本,但是devDependencies字段必须这样写。

这就是Node配置依赖模块的方式。Node拥有一个叫做NPM(Node包管理器)的东西来管理所有的Node依赖木块(就好像你在Ruby中使用gem一样)。你甚至可以将它想象成Wordpress中的插件。

一旦package.json文件编写完成,进入命令行并且进入你项目所在的文件夹。像我这样的命令行白痴通常直接将这个文件夹拖到终端中。

然后运行下面的命令:

npm install    

在你运行完这条命令之后,一个叫做node_modules的心得文件夹将出现在你的项目中。

你看到的其他的文件,README.md以及LICENSE存在是因为我将要把这个项目放到Github上,这是标准做法。

安装步骤的最后一步是安装Grunt CLI(命令行界面)。它是使得在终端中运行grunt命令的保障,没有它,在命令行中输入grunt只会得到一个“命令未找到”的错误。它需要在其他地方安装。否则,在十个项目中你必须使用十个Grunt CLI的副本。

依然是一行命令。在终端中运行下面命令:

npm install -g grunt-cli     

这时你应该关闭终端并重新打开。这是一个保证所有东西都运行正确的好习惯。就好比你在过去安装完一个软件后重启计算机一样。

使用Grunt来拼接一个文件

也许你的想没有下面三个分开的JavaScript文件:

1.jquery.js - 我们使用的JS库 
2.carousel.js - 一个我们使用的jQuery插件 
3.global.js - 我们主要的JavaScript文件,用来配置和调用插件

在生产过程中,我们由于性能的原因需要将这些文件都拼接起来(一次请求好过三次)。我们需要告诉Grunt来替我们完成这项任务。

但是等一等。Grunt实际上并不会自己做任何事情。记住Grunt是一个任务运行器。我们需要自己将任务添加进去。我们实际上还没有对Grunt进行任何设置。我先现在就来做这件事。

官方的Grunt拼接文件的插件是grunt-contrib-concat。如果你想的话可以在Github上阅读关于它的说明,但是你只需要在终端中运行命令行在你的你的项目中使用它():

npm install grunt-contrib-concat --save-dev   

上面的命令行完成了一件非常有意思的事情:你的package.json文件会自动更行并将这个依赖模块包含进去。打开你的package.json文件检查一下,你会看到一行新的代码:

"grunt-contrib-concat": "~0.3.0"   

现在我们已经准备好使用它了。为了使用它你需要开始配置Grunt并告诉他应该做些什么。

你通过一个叫做Gruntfile.js的文件来配置Grunt。

就像我们的package.json文件一样,我们的Gruntfile.js文件有一个非常特殊的格式。你并不需要担心这些代码意味着什么,只需要记住格式就好:

module.exports = function(grunt) { // 1. 所有的配置将在这里进行
    grunt.initConfig({pkg: grunt.file.readJSON('package.json'),concat: { // 2. 拼接文件的配置将在此进行        }
}); // 3. 我们在这里告诉grunt我们将使用插件
        grunt.loadNpmTasks('grunt-contrib-concat'); // 4. 我们在这里告诉grunt当我们在终端中输入grunt时需要做些什么
    grunt.registerTask('default', ['concat']);};   

现在我们需要创建一个配置文件。这个文件完全可以被修改。

记住,我们现在有三个需要拼接起来的JavaScript文件。我们将会把它们的文件路径放置在一个叫做src的包含文件路径的数组中(就像带引号的字符串那样)然后我们将最终的文件设置为dest。目标文件并不需要存在。当任务运行时它会自动被创建并且将所有文件包含在一起。

我们的jquery.js和carousel.js文件都是库。我们并不会修改它们。因此,为了组织方便,我们将它们放置在/js/libs/文件夹下。我们的global.js是我们自己编写的文件,因此我们将它放置在/js/文件夹下。现在我们告诉Grunt去找到所有的文件并将它们合并为一个单独的文件叫做production.js,这个名字预示着它将被用于我们真实存在的网站中。

concat: {   dist: {src: ['js/libs/*.js', // All JS in the libs folder
            'js/global.js'  // This specific file
        ],dest: 'js/build/production.js',}
}   

配置完了concat之后,我们回到终端中,运行下面的命令:

grunt   

看看发生了什么!production.js被创建了并且完美的包含了说那个文件。多么令人惊喜啊!当我第一次运行成功时,我感到浑身都充满了力量。让我们再做一点别的事情。


本文译自Grunt for People Who Think Things Like Grunt are Weird and Hard,原文地址http://24ways.org/2013/grunt-is-not-weird-and-hard/


这篇关于给那些认为Grunt奇怪又难懂的人看的Grunt教程的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

Makefile简明使用教程

文章目录 规则makefile文件的基本语法:加在命令前的特殊符号:.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具,常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件

SWAP作物生长模型安装教程、数据制备、敏感性分析、气候变化影响、R模型敏感性分析与贝叶斯优化、Fortran源代码分析、气候数据降尺度与变化影响分析

查看原文>>>全流程SWAP农业模型数据制备、敏感性分析及气候变化影响实践技术应用 SWAP模型是由荷兰瓦赫宁根大学开发的先进农作物模型,它综合考虑了土壤-水分-大气以及植被间的相互作用;是一种描述作物生长过程的一种机理性作物生长模型。它不但运用Richard方程,使其能够精确的模拟土壤中水分的运动,而且耦合了WOFOST作物模型使作物的生长描述更为科学。 本文让更多的科研人员和农业工作者

沁恒CH32在MounRiver Studio上环境配置以及使用详细教程

目录 1.  RISC-V简介 2.  CPU架构现状 3.  MounRiver Studio软件下载 4.  MounRiver Studio软件安装 5.  MounRiver Studio软件介绍 6.  创建工程 7.  编译代码 1.  RISC-V简介         RISC就是精简指令集计算机(Reduced Instruction SetCom

前端技术(七)——less 教程

一、less简介 1. less是什么? less是一种动态样式语言,属于css预处理器的范畴,它扩展了CSS语言,增加了变量、Mixin、函数等特性,使CSS 更易维护和扩展LESS 既可以在 客户端 上运行 ,也可以借助Node.js在服务端运行。 less的中文官网:https://lesscss.cn/ 2. less编译工具 koala 官网 http://koala-app.

【Shiro】Shiro 的学习教程(三)之 SpringBoot 集成 Shiro

目录 1、环境准备2、引入 Shiro3、实现认证、退出3.1、使用死数据实现3.2、引入数据库,添加注册功能后端代码前端代码 3.3、MD5、Salt 的认证流程 4.、实现授权4.1、基于角色授权4.2、基于资源授权 5、引入缓存5.1、EhCache 实现缓存5.2、集成 Redis 实现 Shiro 缓存 1、环境准备 新建一个 SpringBoot 工程,引入依赖:

Windows环境利用VS2022编译 libvpx 源码教程

libvpx libvpx 是一个开源的视频编码库,由 WebM 项目开发和维护,专门用于 VP8 和 VP9 视频编码格式的编解码处理。它支持高质量的视频压缩,广泛应用于视频会议、在线教育、视频直播服务等多种场景中。libvpx 的特点包括跨平台兼容性、硬件加速支持以及灵活的接口设计,使其可以轻松集成到各种应用程序中。 libvpx 的安装和配置过程相对简单,用户可以从官方网站下载源代码

PHP原理之内存管理中难懂的几个点

PHP的内存管理, 分为俩大部分, 第一部分是PHP自身的内存管理, 这部分主要的内容就是引用计数, 写时复制, 等等面向应用的层面的管理. 而第二部分就是今天我要介绍的, zend_alloc中描写的关于PHP自身的内存管理, 包括它是如何管理可用内存, 如何分配内存等. 另外, 为什么要写这个呢, 因为之前并没有任何资料来介绍PHP内存管理中使用的策略, 数据结构, 或者算法. 而在我们

PHP APC缓存函数使用教程

APC,全称是Alternative PHP Cache,官方翻译叫”可选PHP缓存”。它为我们提供了缓存和优化PHP的中间代码的框架。 APC的缓存分两部分:系统缓存和用户数据缓存。(Linux APC扩展安装) 系统缓存 它是指APC把PHP文件源码的编译结果缓存起来,然后在每次调用时先对比时间标记。如果未过期,则使用缓存的中间代码运行。默认缓存 3600s(一小时)。但是这样仍会浪费大量C

Qt多语种开发教程

Qt作为跨平台的开发工具,早已应用到各行各业的软件开发中。 今天讲讲,Qt开发的正序怎么做多语言开发。就是说,你设置中文,就中文显示;设置英语就英文显示,设置繁体就繁体显示,设置发育就显示法语等。 开发环境(其实多语种这块根环境没太大关系):win10,Qt.5.12.10 一.先用QtCreator创建一个简单的桌面程序 1.工程就随便命名“LanguageTest”,其他默认。 2.在设计师