前端资源构建-Grunt环境搭建

2024-05-15 04:33:14

前端资源构建-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

　　

GRUNTJS压缩前端构建

转载于:https://www.cnblogs.com/philzhou/p/4959827.html

前端资源构建-Grunt环境搭建相关推荐

Gitlab+Jenkins+Artifactory, CI/CD自动构建发布环境搭建使用实践
CI/CD自动构建发布环境搭建使用实践通过C/C++的cmake工程示例项目,构建Gitlab+Jenkins+Artifactory自动构建发布环境.其中 Gitlab提供源码仓库功能,通过web ...
浅谈前端自动化构建 -- Grunt、Gulp、FIS
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:内容较多,建议通过左侧导航栏进行阅读前端自动化构建基本介绍一切重复工作本应自动化.将开发中的源代码,自动化的转换成生产环境中可以运行的程序, ...
从零开始学WEB前端——前置知识以及环境搭建
??项目介绍先做个自我介绍,本人是一个没人写前端所以就自学前端的后端程序员??.在此项目中我会和大家一起从零基础开始学习前端,从后端程序员的视角来看前端,受限于作者的水平本项目暂时只会更新到前端框架 ...
grafana的前端技术_Grafana开发环境搭建
本次介绍一下Mac/Windows环境源码编译步骤. 依赖安装Go 1.11.5(根据不同系统环境选择需要下载的包) 安装sqlite3 (Mac自带,Windows需要自己下载) GO 环境搭建 ...
STM32F4 | 最小系统设计 | 开发板资源介绍 | 开发环境搭建 | 程序下载
文章目录一.STM32最小系统设计 1.什么叫MCU最小系统? 2.STM32最小系统 2.1 供电电路(电源部分) 2.2 复位电路 2.3 时钟电路 2.4 BOOT启动模式选择 2.5 下载电 ...
Jenkins+Jmeter+Gitlab+Ant接口自动化持续集成构建（环境搭建配置）
第一步:环境搭建: 准备工作: Java及jdk配置.jmeter安装配置.Jenkins搭建完成.安装Ant 一.JDK配置 JDK配置请百度自行配置二.Jmeter安装配置 1.把 apache ...
数字IC前端设计入门----之环境搭建
数字IC前端设计入门----环境搭建今天开始学习IC设计,需要的都学可以一起来哦.作者小白一个,欢迎多多交流. 在某宝上花了79元买套学习资料,但是基本都是视频,应该是翻版的资料.我这里拿出来无偿给 ...
前端项目线上环境搭建(Nginx)和线上部署(推荐)
本次主要讲解的是服务器上node环境的搭建,以及vue/react/等的项目的部署,作为一名前端,一定要学会哦. 购买云服务器/主机云服务器:阿里云.百度云.新浪云.腾讯云主机:不建议购买,共享的 ...
vs java调试_基于VSCode的Java编程语言的构建调试环境搭建指南（作业三）
1.Java编译环境的搭建(CodeRunner) CodeRunner的强大之处在于它支持许多语言,只要选好语言,就直接可以写代码,即开即用的模式.时至今日,Code Runner已经有了超过400 ...

最新文章

热门文章