原文地址:Grunt学习使用必看

grunt简介神马的不多说,到处一大堆。

我只说说我已经实现了的代码。

按照官方的教程 相信已经配置好了,接下来说 package.json 和 Gruntfile.js这2个文件,package.json是为了告诉grunt我们用哪些插件,这些插件的版本是多少,以及我这个项目的一些信息。

那有人说我怎么知道我需要什么插件,我怎么写这个文件?请看官方的例子:

 {
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0"
}
}

那么我们只需要在最初的文件中写上

{
"name": "my-project-name",
"version": "0.1.0"
}
这里要注意版本的写法,必须是0.1.0,的格式,不然会报错。​

Gruntfile.js文件现在不用管它,执行npm install,你可以发现运行结果如下,提示你没有写什么什么的,无关紧要。。。

当我们需要用什么插件的时候,再利用npm install <插件名> --save-dev 命令即可下载到你项目的node_modules文件夹下,并且自动添加到package.json文件中,这样就可以不用担心这个文件会不会写了。

接着配置Gruntfile.js文件,官方也有解释流程,点这里 ,接着看我们这个文件

 module.exports = function(grunt) {
//配置任务,所有插件的信息
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'), // 1、声明插件的配置 }),
//2、加载我们的插件 //3、注册并告诉grunt我们要运行这个插件 };

就是这样一个流程配置,比如我们要使用grunt-contrib-uglify插件,这个插件是用来压缩js文件。

首先我们得安装这个插件npm install grunt-contrib-uglify --save-dev

可以发现我们的package.json中多了这样的语句

"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-uglify": "~0.5.0"
}

这里的grunt肯定是要必须安装的呗,grunt都没有你还用什么插件。。。

接着配置我们的插件,你可以到官方文档中找到相应的插件并查看怎么用。按照上面说的流程依次写入即可。

接着是2、3步

最后再执行grunt命令,即可查看到生成的压缩文件,项目的目录结构是:

还有很多很多插件,需要我们自己去发现并使用。

参考网址:

grunt官网

Grunt教程

Grunt学习使用的更多相关文章

  1. Grunt 学习笔记【2】---- 配置和创建任务

    本文主要讲Grunt任务配置. 说明:本文所有示例都基于Grunt 0.4.5版本. 一 说明 使用Grunt实现项目的打包等工程化工作,实际上是通过Grunt提供的机制和插件,配置一个个任务(例如: ...

  2. grunt学习

    有些时候,项目中的静态资源,比如图片占用的文件有点大,影响加载的速度,所以会选择grunt对其进行压缩打包.对于grunt其他的用法,还在继续学习中,先记录下关于grunt的一些学习. grunt是一 ...

  3. 我的grunt学习笔记

    什么是grunt?  Grunt是一个JavaScript任务运行器,用于自动执行频繁任务(如压缩,编译,单元测试)的工具.它使用命令行界面来运行在文件中定义的自定义任务(这个文件称为Gruntfil ...

  4. Grunt学习日记

    Grunt和 Grunt 插件是通过npm安装并管理的, npm是Node.js的包管理器. 第一步:先安装node.js环境 第二步:安装Grunt-CLI 在node.js命令工具中输入npm i ...

  5. grunt学习笔记

    1. 在使用grunt前需要执行的几条命令和用途 npm uninstall -g grunt  删除掉全局grunt npm install -g grunt-cli 把grunt加入你的系统搜索路 ...

  6. grunt学习随笔

    1 grunt 安装  全局安装 npm install -g grunt-cli 2 配置好package.json 和 Gruntfile 文件,这两个文件必须位于项目根目录下. 2.1packa ...

  7. grunt学习笔记1 理论知识

    你需要检查js语法错误,然后再去压缩js代码.如果这两步你都去手动操作,会耗费很多成本.Grunt就能让你省去这些手动操作的成本. “—save-dev”的意思是,在当前目录安装grunt的同时,顺便 ...

  8. grunt学习三-bower(一)

    bower是什么?官网给出的  a package manager fow the web.简单说引入文件版本管理,例如jquery,传统做法到jquery的官网下载下,在引入,这样比较繁琐,也不利用 ...

  9. grunt学习二

    1. 新建文件和文件目录 mkdir grunt-in-action cd grunt-in-action cd grunt-in-action mkdir grunt-empty cd grunt- ...

随机推荐

  1. ABP文档 - 异常处理

    文档目录 本节内容: 简介 启用错误处理 非AJAX请求 显示异常 UserFriendlyException Error 模型 AJAX 请求 异常事件 简介 这个文档针对Asp.net Mvc和W ...

  2. Redis数据库

    Redis是k-v型数据库的典范,设计思想及数据结构实现都值得学习. 1.数据类型 value支持五种数据类型:1.字符串(strings)2.字符串列表(lists)3.字符串集合(sets)4.有 ...

  3. Jquery(1)

    鼠标点击事件: <input type="button" value="测试" onclick="test()" /> < ...

  4. nuget常用命令

    nuget命令的用法: 一.安装 1.安装指定版本类库install-package <程序包名> -version <版本号> 2.安装到指定的项目install-packa ...

  5. [转]Java常用工具类集合

    转自:http://blog.csdn.net/justdb/article/details/8653166 数据库连接工具类——仅仅获得连接对象 ConnDB.java package com.ut ...

  6. mono -图片处理

    这篇文章中您将了解到以下内容 保存Bitmap WebClient文件上传 向服务端传递数据 保存Bitmap 做移动端开发,图片上传下载是最普通的需求了. 在mono for android中按照资 ...

  7. [异常解决] How make ubuntu use Google Search

    1.Download the hosts file fromhttps://laod.cn/hosts/2016-google-hosts.html [1] 2.Write a bash shell ...

  8. 父ListView嵌套子ListView时点击事件没有响应

    转发请备注出处:http://www.cnblogs.com/LT5505/p/5972999.html 问题: 在ListView中嵌套ListView之后,子ListView会把父ListView ...

  9. hibernate一对一主键单向关联

    关联是类(类的实例)之间的关系,表示有意义和值得关注的连接. 本系列将介绍Hibernate中主要的几种关联映射 Hibernate一对一主键单向关联Hibernate一对一主键双向关联Hiberna ...

  10. Atitit 知识管理的重要方法 数据来源,聚合,分类,备份,发布 搜索

    Atitit 知识管理的重要方法 数据来源,聚合,分类,备份,发布 搜索 1.1. Rss 简易信息聚合(也叫聚合内容 Really Simple Syndication1 1.1. Rss 简易信息 ...