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 学习笔记【2】---- 配置和创建任务
本文主要讲Grunt任务配置. 说明:本文所有示例都基于Grunt 0.4.5版本. 一 说明 使用Grunt实现项目的打包等工程化工作,实际上是通过Grunt提供的机制和插件,配置一个个任务(例如: ...
- grunt学习
有些时候,项目中的静态资源,比如图片占用的文件有点大,影响加载的速度,所以会选择grunt对其进行压缩打包.对于grunt其他的用法,还在继续学习中,先记录下关于grunt的一些学习. grunt是一 ...
- 我的grunt学习笔记
什么是grunt? Grunt是一个JavaScript任务运行器,用于自动执行频繁任务(如压缩,编译,单元测试)的工具.它使用命令行界面来运行在文件中定义的自定义任务(这个文件称为Gruntfil ...
- Grunt学习日记
Grunt和 Grunt 插件是通过npm安装并管理的, npm是Node.js的包管理器. 第一步:先安装node.js环境 第二步:安装Grunt-CLI 在node.js命令工具中输入npm i ...
- grunt学习笔记
1. 在使用grunt前需要执行的几条命令和用途 npm uninstall -g grunt 删除掉全局grunt npm install -g grunt-cli 把grunt加入你的系统搜索路 ...
- grunt学习随笔
1 grunt 安装 全局安装 npm install -g grunt-cli 2 配置好package.json 和 Gruntfile 文件,这两个文件必须位于项目根目录下. 2.1packa ...
- grunt学习笔记1 理论知识
你需要检查js语法错误,然后再去压缩js代码.如果这两步你都去手动操作,会耗费很多成本.Grunt就能让你省去这些手动操作的成本. “—save-dev”的意思是,在当前目录安装grunt的同时,顺便 ...
- grunt学习三-bower(一)
bower是什么?官网给出的 a package manager fow the web.简单说引入文件版本管理,例如jquery,传统做法到jquery的官网下载下,在引入,这样比较繁琐,也不利用 ...
- grunt学习二
1. 新建文件和文件目录 mkdir grunt-in-action cd grunt-in-action cd grunt-in-action mkdir grunt-empty cd grunt- ...
随机推荐
- Linux下服务器端开发流程及相关工具介绍(C++)
去年刚毕业来公司后,做为新人,发现很多东西都没有文档,各种工具和地址都是口口相传的,而且很多时候都是不知道有哪些工具可以使用,所以当时就想把自己接触到的这些东西记录下来,为后来者提供参考,相当于一个路 ...
- Web Api 入门实战 (快速入门+工具使用+不依赖IIS)
平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html 屁话我也就不多说了,什么简介的也省了,直接简单概括+demo ...
- 01.LoT.UI 前后台通用框架分解系列之——小图片背景全屏显示(可自动切换背景)
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...
- iOS逆向工程之Hopper+LLDB调试第三方App
LLDB是Low Level Debugger的简称,在iOS开发的调试中LLDB是经常使用的,LLDB是Xcode内置的动态调试工具.使用LLDB可以动态的调试你的应用程序,如果你不做其他的额外处理 ...
- JS继承之借用构造函数继承和组合继承
根据少一点套路,多一点真诚这个原则,继续学习. 借用构造函数继承 在解决原型中包含引用类型值所带来问题的过程中,开发人员开始使用一种叫做借用构造函数(constructor stealing)的技术( ...
- 直播推流端弱网优化策略 | 直播 SDK 性能优化实践
弱网优化的场景 网络直播行业经过一年多的快速发展,衍生出了各种各样的玩法.最早的网络直播是主播坐在 PC 前,安装好专业的直播设备(如摄像头和麦克风),然后才能开始直播.后来随着手机性能的提升和直播技 ...
- 虚拟机VMware12.05下安装Ubuntu16.04几个关键地方
在踩了自己按照网上的教程安装Ubuntu之后,仍然踩了不少坑,鼓捣了一段时间,才达到自己想要的界面. 下面就来说说,大家可能也会遇到的情况: 1.安装ISO镜像时候,路径直接选择 你从Ubun ...
- [转]thinkphp 模板显示display和assign的用法
thinkphp 模板显示display和assign的用法 $this->assign('name',$value); //在 Action 类里面使用 assign 方法对模板变量赋值,无论 ...
- Xamarin.Android-捕获未处理异常(全局异常)
一.前言 android中如果出现了未处理的异常,程序会闪退,这是非常不好的用户体验,很多用户会因此卸载APP,因此未处理的异常是应该尽力避免的. 有些很难避免的异常(如:IO.网络等),应在代码中进 ...
- Dijkstra 单源最短路径算法
Dijkstra 算法是一种用于计算带权有向图中单源最短路径(SSSP:Single-Source Shortest Path)的算法,由计算机科学家 Edsger Dijkstra 于 1956 年 ...