前端资源构建-Grunt环境搭建
前端资源构建-Grunt
随着前端开发的复杂度越来越高,前端页面动辄上几十个js,十几个html页面。用户打开一个页面需要加载一堆的css,js,html文件,对于有大量用户的web应用来说,既消耗服务带宽,用户加载速度也很受影响。特别是现在大量的移动端web应用涌现出来,页面加载速度至关重要,所以对前端资源做压缩是必须做的工作。grunt就是nodejs平台上一个非常优秀的前端构建工具。他可以拼接、丑化、压缩前端资源,大大提升页面访问速度
下面简要介绍grunt构建环境在windows平台的搭建过程。
1. install nodejs
nodejs for windows download address
2. install npm
open nodejs cmd window
npm install -g grunt-cli
3. 创建grunt依赖文件
package.json
{
"name": "www",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "geekchow",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-copy": "^0.8.1",
"grunt-contrib-cssmin": "^0.14.0",
"grunt-contrib-jshint": "^0.11.2",
"grunt-contrib-requirejs": "^0.4.4",
"grunt-contrib-uglify": "^0.9.2",
"grunt-css": "latest",
"grunt-filerev": "latest",
"grunt-strip": "^0.2.1",
"grunt-usemin": "latest"
}
}
此json文件中记录了grunt构建过程中需要使用的包,放置在网站根目录
4. 安装构建依赖包
命令行去到网站目录,运行如下命令,安装所有的依赖包。
npm install
安装完后发现网站目录下多了一个叫 node_modules的目录,里面放着package.json中所引用的js包。
5. 创建构建文件Gruntfile.js
前端工程构建一把包括以下几个操作。
- concat:合并js文件,减少js文件数量。
- uglify:js、html文件去空白,js做变量混淆。
- clean: 清除构建过程中产生的中间文件。
- copy:拷贝文件,一般发布目录和开发目录是分开的,copy操作可以将文件从开发目录
- usemin:在js做完合并后,自动使用合并且混淆过的js替换原有引用。
- cssmin:样式文件去空白。
示例Gruntfile.js文件:
6.构建代码
在nodejs命令窗口下运行如下代码,执行构建任务
grunt task-name
前端资源构建-Grunt环境搭建的更多相关文章
- ubuntu基于VSCode的C++编程语言的构建调试环境搭建指南
ubuntu基于VSCode的C++编程语言的构建调试环境搭建指南 首先安装g++ sudo apt install g++ 检查是否安装成功: 在插件栏安装插件c/c++.code runner: ...
- Grunt环境搭建及使用 前端必备
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...
- Grunt环境搭建及使用
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...
- 前端开发 Vue -1windows环境搭建Vue Node开发环境
解决几个疑问: 想学习下vue.js,我理解的它是一个前端的框架,主要作用是对数据的处理,和juqery类似,所以不太理解为什么要在nodejs中npm install vue呢?在html文件中引入 ...
- 【免费开源】基于Vue和Quasar的crudapi前端SPA项目实战—环境搭建 (一)
背景介绍和环境搭建 背景 crudapi增删改查接口系统的后台Java API服务已经全部可用,需要一套后台管理UI,主要用户为开发人员或者对计算机有一定了解的工作人员,通过UI配置元数据和处理业务数 ...
- 【前端自动化构建 grunt、gulp、webpack】
参考资料: 用自动化构建工具增强你的工作流程!:http://www.gulpjs.com.cn/ gulp详细入门教程:http://www.ydcss.com/ JavaScript构建(编绎)系 ...
- 前端移动App开发环境搭建
移动App开发环境安装 一.环境安装准备软件 二.node的安装 像安装普通软件一样,安装对应版本的node软件,安装好之后就可以运行npm命令行,比如npm init .npm install -g ...
- 前端资源多个产品整站一键打包&包版本管理(一)
来新公司工作的第五个月.整站资源打包管理也提上了日程. 问题: 首先.什么是整站的打包管理呢? 我们公司的几个重要产品都在同一个webapp里面,但是,不同的开发部门独立开发不同的产品,长期以来,我们 ...
- Linux下环境搭建(四)——jenkins+gitlab+jmeter实践
经过前三篇博文的介绍,jenkins+gitlab+jmeter接口自动化的框架就搭建成功了,详细可见 Linux下环境搭建(一)——java.tomcat配置 Linux下环境搭建(二)——jenk ...
随机推荐
- pickle序列化
通过pickle来序列化: # -*- coding: utf-8 -*- import pickle #-------------------序列化--------------------- zoo ...
- ARC中KVO开发注意
1 在ARC 中 KVO开发 添加监听和去掉监听必需 一一匹配,不要有过的去掉监听否则会有可能导致对象无法释放. 例如,在一个viewcontroller中添加webview 并监听webview的c ...
- win10 下 gulp-sass 无法使用的解决
参考链接: http://stackoverflow.com/questions/28409100/try-reinstalling-node-sass-on-node-0-12 解决方法: npm ...
- JAVA源码走读(一) HashMap与ArrayList
HashMap 一.HashMap基本概念: HashMap是基于哈希表的Map接口的实现.此实现提供所有可选的映射操作,并允许使用null值和null键.此类不保证映射的顺序,特别是它不保证该顺序恒 ...
- 功能强大的web打印控件lodop的使用
打印是很多web系统都需要的功能,最近找到一款功能强大,使用简单,价格便宜的web打印工具Lodop,免费也能用,不过有水印,也不贵商业开发建议购买. 废话不多说,拿来就用,从简单的打印开始. 1.下 ...
- LogStash的Filter的使用
最近在项目中使用LogStash做日志的采集和过滤,感觉LogStash还是很强大的. input { file{ path => "/XXX/syslog.txt" sta ...
- javascript 中正则表达式应用
<script type="text/javascript"> var str="<script type='text/javascript'> ...
- nyoj 82 迷宫寻宝(二)
http://acm.nyist.net/JudgeOnline/problem.php?pid=83 题目解法主要在于判断两线段是否相交,思路是穷举所有地图四周的点,其中每一个边界上的点和终点构成一 ...
- .NET DataSet、DataTable操作记录
一直在习惯.net的编程思维,或是说C#吧.因为前几年一直在用PHP做站,现在用.net很不习惯,主要C#都依赖对控件.类的熟悉,不然很多功能都实现不了. 需求 最近做了一功能,从SQL Server ...
- Django 静态文件配置(static files)
Django version: 1.9 Python versrion: 3.5.2 这几天Django配置静态文件(本例是要加载index.css), 总是不对,最后终于试对了,这里记录下,方便以后 ...