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/. ...
随机推荐
- 原创Couldn't read packet: Connection reset by peer 错误排查思路(推荐)
作为一个运维 不是你懂多少知识才是你的价值 你有幸能遇到多少错误才是你的最大的价值 知识 你有我有大家有 错误我有你没有 这便是我的价值 我遇到一个错误 蛮难遇到的一个错误 所以想分享给大家 下面我 ...
- 在2015年 开发一个 Web App 必须了解的那些事
在过去的一年里,我在从头开始开发我的第一个重要的Web应用.经验教会了很多以前不知道的东西,特别是在安全性和用户体验方面. 值得一提的是,我上一次尝试构建的任何合理复杂性是在2005年.所以,在安全防 ...
- Android(java)学习笔记180:多媒体之图形的变化处理
1. 图形的缩放 (1)布局文件activity_main.xml如下: <LinearLayout xmlns:android="http://schemas.android.com ...
- nodeJS和npm的环境配置
1.windows下的NodeJS安装是比较方便的(v0.6.0版本之后,支持windows native),只需要登陆官网(http://nodejs.org/),便可以看到首页的“INSTALL” ...
- Bézier surface(贝塞尔曲面)
Bézier surface(贝赛尔曲面) 贝塞尔曲面是一种用于计算机图形学.计算机辅助设计和有限元建模的数学样条.与贝塞尔曲线一样,贝塞尔曲面由一组控制点定义.与插值在许多方面相似,一个关键的区别是 ...
- 1、C编程预备计算机知识
一.数据类型 基本数据类型 1.整数 整形 -- int -- 4 短整型 -- short int -- 2 长整型 -- long int --8 2.浮点数(实数) 单精度浮点数 -- floa ...
- Navicat Premium 12试用期的破解方法
参考:https://blog.csdn.net/Jason_Julie/article/details/82864187 已测可用
- Linux下QT、cannot find -lGL、
近日在虚拟机下的QT5.11.2安装出现了一个bug,折腾好久才搞定. 环境:vmware + debain 9.5 + qt5.11.2 . QT_DIR = /Qt5.11.2/5.11.2/gc ...
- Memcached的安装和应用
Memcached的安装 1.安装libeventlibevent是一个事件触发的网络库,适用于windows.linux.bsd等多种平台,内部使用 select.epoll.kqueue等系统调用 ...
- python实现快速排序、冒泡
快速排序:首先任意选取一个数据(通常选用数组的第一个参数)作为关键数据,然后将比它小的数放在它前面,比它大的数放在后面,这个过程称之为快速排序 def quick_sort(l): if len(l) ...