Grunt入门学习(1) - 环境安装

　　这周根据项目需要，在项目的基础上分模块开发了一个小的项目板块，但是在规范组织每个模块的代码和其依赖性时比较麻烦，需要一个项目板块的构建工具。各个模块都包括其对应的html页面模板、css样式表、Javascript文件，以及相关的依赖文件，图片等。

具体的目录结构如下图所示：

　　往往在代码上传和项目发布之前需要将模块内各个文件比如JavaScript文件、CSS样式表，图片等进行压缩合并，目的主要在于减少加载文件的大小，加快文件加载速度，同时也能在一定程度上保护源代码，提高安全性。Grunt是一个基于node.JS的自动化构建工具。对于需要反复重复的任务，例如代码压缩（minification），合并、编译、文件拷贝、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。只要在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

　　下面开始学习Grunt来实现将VariableMessageSignManagement目录下的所有模块自动拷贝到compressedFiles目录，并且尽可能的压缩每个模块的资源文件。

　　1.首先安装grunt-cli, grunt 以及所需的grunt插件

　　要使用grunt，首先需要安装grunt-cli到全局环境中，在命令行窗口中执行如下命令：

　　npm install -g grunt-cli　　//这条命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行与grunt相关的命令了。

　　　注意，安装grunt-cli并不等于安装了 Grunt！Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样有一个好处是，允许你在同一个系统上同时安装多个版本的 Grunt。这样就能让多个版本的 Grunt 同时安装在同一台机器上。

　　然后进入项目根目录(此处我将VariableMessageSignManagement的父目录作为的根目录)。

　　根目录具体如图：。

　　　　(1) 在根目录下新建两份文件：package.json 和 Gruntfile.js　　　　//package.json文件名是固定的，必须是这个；Gruntfile.js文件名不固定，可以按个人爱好自己设定，但建议用此名，醒目！

　　　　　　package.json 文件被用于列出项目依赖的grunt和Grunt插件版本，放置于devDependencies配置段内。Gruntfile.js 用来配置或定义任务（task）并加载Grunt插件的，一般是JS文件或者coffee文件。

　　　　新建的package.json文件，里面内容是编辑器自行填写的，不用管；而Gruntfile.js文件内是空的，什么都没有！

　　　　(2) 执行如下命令开始安装grunt 以及相关的grunt插件：

　　　　npm install grunt –-save-dev　　//这条命令是安装最新版的grunt到项目根目录，--save-dev 表示将其添加到package.json文件的devDependencies内。同时会在根目录新建node_modules目录，存放grunt等的功能文件。如下图所示：

　　　　同样，grunt插件和其它node模块都可以按相同的方式安装，并自动添加到devDependencies内。在此我安装了几个常用的grunt插件

　　　　npm install grunt-contrib-copy –-save-dev  　　　　//复制文件和文件夹　　　　

　　　　npm install grunt-contrib-htmlmin –-save-dev　　　 //压缩HTML文件

　　　　npm install grunt-contrib-uglify –-save-dev　　　  //压缩JS文件

　　　　npm install grunt-contrib-cssmin –-save-dev　　　　//压缩CSS文件。

　　　　npm install grunt-contrib-imagemin –-save-dev　　　//压缩PNG，JPEG和GIF等图像

装完这四个grunt插件后，devDependencies配置如左图所示！

　　2.其次编写Gruntfile.js任务文件

　　　　Gruntfile.js 或 Gruntfile.coffee 文件是有效的 JavaScript 或 CoffeeScript 文件。应当放在项目根目录中，和package.json文件在同一目录级，并和项目源码一起加入源码管理器。

Grunt入门学习之(1) -- 环境安装的更多相关文章

  1. Redis入门学习（一）——安装配置

    最近马上要找实习了,听学长说他们公司里用了redis来解决缓存问题,在大三结束前来学习一下. 问:Redis是什么? 答:(官方)REmote DIctionary Server(Redis)是一个K ...

  2. Docker容器学习梳理 - 基础环境安装

    以下是centos系统安装docker的操作记录 1)第一种方法:采用系统自带的docker安装,但是这一般都不是最新版的docker安装epel源[root@docker-server ~]# wg ...

  3. grunt 入门学习

    前端工作流,Grunt上手指南 Posted@2013-04-20 7:15 a.m. CategoriesGrunt ,  javascript 我想先花点时间回忆一下作为一个前端需要做的工作(Lo ...

  4. NOSQL Mongo入门学习笔记 - MongoDB的安装(一)

    手上的工作不是很忙,所以来学习学习很久就像接触的MongoDb,无奈前段时间工作时间都比较多.记录在这里供以后参考 环境: Centos 7 64位 开始: 1. 在官网下载Mongo : wget  ...

  5. MongoDB入门学习（一）—— 安装和启动

    最近由于工作需要,开始学习MongoDB数据库了.第一篇博文就从这里开始吧,以此记录下学习中的点点滴滴,为自己加油呢! (一) MongoDB简介 网上搜搜了一下:(来源:http://www.run ...

  6. Linux学习第二步(Java环境安装)

    jdk版本:jdk-8u131-linux-x64.rpm 注:以下操作在root用户或具有root权限的用户下操作 一.将 dk-8u131-linux-x64.rpm拷贝到/home目录下 cp ...

  7. Python爬虫入门教程 1-100 CentOS环境安装

    简介 你好,当你打开这个文档的时候,我知道,你想要的是什么! Python爬虫,如何快速的学会Python爬虫,是你最期待的事情,可是这个事情应该没有想象中的那么容易,况且你的编程底子还不一定好,这套 ...

  8. web自动化测试python+selenium学习总结----python环境安装

    一.python下载地址:https://www.python.org/downloads/ 二.双击python的.exe文件安装: 后面直接点击“next” 步骤二:选择安装在D:\python3 ...

  9. dubbo入门学习笔记之环境准备

    粗略的学完springcloud后由于公司的项目有用到一点dubbo,刚好手头上又有dubbo的学习资料,于是趁机相对系统的学了下duboo框架,今天开始记录下我的所学所悟;说来惭愧,今年之前,作为一 ...

随机推荐

  1. PHP学习心得（1）——实用脚本

    <?php 来表示 PHP 标识符的起始,然后放入 PHP 语句并通过加上一个终止标识符 ?> 来退出 PHP 模式 调用函数phpinfo(),将会看到很多自己系统的信息,以及预定义变量 ...

  2. {POJ}{3988}{Software Industry Revolution}{DP好题}

    题意:给定一个字符串d,要求用另一字符串s去匹配,其中s中的?可以为任何字符,*可以为任意个字符,求最小的匹配权值 思路:这题和CSDN英雄会的“反相互”类似,由于其中某些字符的不确定性,利用动态规划 ...

  3. spring web MVC

    详情:http://blog.csdn.net/mic_hero/article/details/50237627

  4. Linux Shell编程（13）——数字常量

    除非一个数字有特别的前缀或符号,否则shell脚本把它当成十进制的数.一个前缀为0的数字是八进制数.一个前缀为0x的数字是十六进制数.一个数用内嵌的#来求值则看成BASE#NUMBER(有范围和符号限 ...

  5. [LeetCode][Python]Largest Number

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com'https://oj.leetcode.com/problems/largest ...

  6. python无线网络安全入门案例

    原文链接:http://www.devx.com/security/Article/34741 翻译:诸神的黄昏 整理校对:玄魂 --- 随着⽆线⽹络在家庭和商业中的普及,新的安全挑战是⽆法避免的.保 ...

  7. #UnityTips# 2017.11.14

    hi,all.最近比较忙,所以更新也比较慢了. 今天就来和大家分享一个小Tip,它是关于UGUI的坑的. 使用过UGUI的朋友们都知道,Canvas的渲染方式有三种: Screen Space Ove ...

  8. 向TRichEdit插入图片的单元

    很简单, 就3个函数, 直接看代码吧 unit RichEditBmp; { 2005-03-04 LiChengbin Added: Insert bitmap or gif into RichEd ...

  9. Python操作 Memcache、Redis、RabbitMQ

    Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度 ...

  10. Python杂写1

    一:编程及编程语言介绍 编程的目的:人把自己的思想流程表达出来,让计算机按照这种思想去做事,把人给解放出来. 编程语言:简单的说就是一种语言,是人和计算机沟通的语言. 编程:例如Python,利用Py ...