grunt安装,配置记录
进了新的公司,需要重构一个项目,从头开始。本人患懒癌已久,一直没有写博客的打算,也是因为资质还比较浅,写不出什么富有涵养的内容,后来想了想,就当自己的笔记吧。这次从新开始,未尝不是一个博客开始的好时机,所以,慢慢来吧。。
项目最开始,还是从搭建新的开发环境开始吧,叫什么来着,要想砍树,必先磨刀!grunt工具是我最先接触到的前端打包工具,包括less编译,js文件压缩,css文件压缩等功能。所以还是先把这个工具研究透一点。。
1、首先,grunt有官方网站:http://www.gruntjs.net/
借用官网的一句话:grunt是通过npm来管理的,npm是node.js的管理工具。所以首先你需要安装node的环境,node官网:https://nodejs.org/en/,node最好是安装在全局的环境中。
接着,在你安装好npm后,在你的项目文件下,打开cmd命令行,输入npm install -g grunt-cli
是的,运行完了,然而文件夹里并没有什么变化,这个时候缺一个文件,package.json文件,看看我的package.json文件怎么配置的咯
{
"name": "demo",
"version": "0.1.0",
"description": "demo",
"license": "MIT",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-uglify": "~0.2.1",
"grunt-contrib-requirejs": "~0.4.1",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-strip": "~0.2.1",
"grunt-contrib-concat":"~0.1.1",
"grunt-css": ">0.0.0",
"grunt-contrib-less": "*",
"grunt-contrib-cssmin": "*",
"grunt-contrib-watch": "*"
},
"dependencies": {
"express": "3.x"
}
}
2、可以直接手动新建一个packege.json文件,将上面的配置代码复制到新建的文件中。
packge.json文件建好后,在cmd命令行中运行: npm install
是的,命令运行后,文件目录中新增了node_modules文件夹,里面是你配置的packge.json文件里需要加载的文件。
3、好的,现在grunt配置文件搭好了,工具备好了,还差一个策划方案了,也就是grunt任务,里面配置你真正的执行任务,Gruntfile.js文件。一样,先看看我的gruntfile里有什么任务吧。
module.exports = function (grunt) {
// 项目配置
var config = {
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
src: 'src/a.js',
dest: 'dest/min/a.min.js'
}
},
copy: {
main: {
files: [{
src: 'src/a.js',
dest: 'dest/js/a.js'
},{
src: 'dest/min/a.min.js',
dest: 'dest/js/a.min.js'
}]
}
}
};
grunt.initConfig(config);
// 加载提供"uglify"任务的插件
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-copy');
// 默认任务
grunt.registerTask('build', ['uglify','copy:main']);
}
4、如上述代码,我所要做的是一个压缩和拷贝的两个任务,那么看看我们的结果吧。cmd命令运行:grunt build
哒哒,运行成功,看下我们的文件夹出现了什么变化呢?
解释一下我的任务做了什么哈:
1、uglify:将我建在src文件下的a.js文件,压缩到到min目录下,a.min.js文件
2、copy: 将src下的原a.js文件 和 min目录下的a.min.js文件拷贝到dest目录里
从我的截图可以看出,文件大小变了哦,好了,grunt任务执行结束。
grunt安装,配置记录的更多相关文章
- Grunt安装配置教程:前端自动化工作流
Grunt这货是啥? Grunt 是一个基于任务的 JavaScript 项目命令行构建工具. 最近很火的前端自动化小工具,基于任务的命令行构建工具 http://gruntjs.com Grunt能 ...
- UBuntu安装配置记录
记得是06年左右第一次安装的 Linux,当时是下载的 Fedora镜像,版本已经记不清了,在商业街的电脑维修店刻的盘,回来后兴冲冲地和XP一起安装的双系统.其实就是直接的体验了一把,只是看了看X-W ...
- win8下nodejs安装配置记录
1:打开nodejs官网http://nodejs.org/ 下载安装版. 2:安装完成后,打开cmd输入node -v 查看是否安装成功: 3:安装express,通过全局安装方式进行安装: 安装完 ...
- fedora23安装配置记录
一.安装fedora 1.下载fedora的镜像文件,个人比较喜欢gnome,因而直接下载工作站版本了! http://start.fedoraproject.org/这个是浏览器首页,提供了fedo ...
- appium 使用环境安装配置记录
一.安装配置Java (cmd输入java,回车,没有出现“不是内部或外部命令,也不是可运行的程序或批处理文件”,即为成功) 二.安装node.js (cmd输入node -v,显示版本号即为成功) ...
- gerrit安装配置记录
gerrit安装配置 java -jar gerrit-2.13.5.war init -d gerrit Authentication method [OPEN/?]: htt Install Ve ...
- SSDB安装配置记录
SSDB的性能很突出,与Redis基本相当了,Redis是内存型,容量问题是弱项,并且内存成本太高,SSDB针对这个弱点,使用硬盘存储,使用Google高性能的存储引擎LevelDB,适合大数据量处理 ...
- CentOS 6.6下Redis安装配置记录
转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/120.html?1455855209 在先前的文章中介绍过redis,以下 ...
- Ubuntu20.04 PostgreSQL 14 安装配置记录
PostgreSQL 名称来源 It was originally named POSTGRES, referring to its origins as a successor to the Ing ...
- FreeSwitch安装配置记录
安装FreeSwitch 主要命令如下: git clone -b v1.2.stable git://git.freeswitch.org/freeswitch.gitcd freeswitch/. ...
随机推荐
- learnpythonthehardway EX41 相关
str.count() # str.count()方法用于统计字符串里某个字符出现的次数.可选参数为在字符串搜索的开始与结束位置. # str.count(sub, start= 0,end=len( ...
- ECharts是我接触过的最优秀的可视化工具,也是进步最快的软件,希望它早日成为世界级的开源项目。
ECharts的广泛网址: http://echarts.baidu.com/doc/example.html 零编程玩转图表: http://tushuo.baidu.com/?qq-pf-to=p ...
- Linux之基础命令——文件搜索
grep(匹配符合条件的字符串) 无参:显示匹配行 -c:显示匹配行数 -e 字符串:匹配特殊字符串,如-开头 -i:忽略大小写 -v:输出不匹配行 -w:匹配指定字符串 可以和别的命令通过" ...
- MPP(大规模并行处理)简介
1. 什么是MPP? MPP (Massively Parallel Processing),即大规模并行处理,在数据库非共享集群中,每个节点都有独立的磁盘存储系统和内存系统,业务数据根据数据库模型和 ...
- win7下自动更新svn目录
!!注意,文件编码必须是ANSI.否则中文路径会乱码 ::这里是svn安装目录 set svnExe="C:\Program Files\TortoiseSVN\bin\TortoisePr ...
- celery worker集群搭建
举个小栗子,在生产环境下,我们有两个异步任务需求,需要分别部署在两台服务器上,并用不同的队列实现 用户邮件发送 pageview统计 主要的注意点,在任务执行时需指定queue,routing_key ...
- jquery点击tr换背景颜色
jquery点击tr换tr的背景颜色,table的id为db-list1jQuery(function() { jQuery("#db-list1 tr").click( func ...
- docker nginx 负载均衡
index1.html <html> <head> <title>lb-test</title> </head> <body> ...
- 测试网站链接是否可用(wget和curl)
一.wget用法案例 系统给的命令参数如下: [root@litong_centos mysql3307]# wget --help GNU Wget 1.14, a non-interactive ...
- 【JDBC】java连接MySQL数据库步骤
java连接数据库步骤 1. 加载驱动 Class.forName("com.mysql.java.Driver"); 或: registerDriver(new com.mysq ...