搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > web前端自学平台 > 前端js和css的压缩合并之grunt

前端js和css的压缩合并之grunt

web前端自学平台 2017-10-31

使用前提

grunt是基于node的,要在你电脑上使用grunt,电脑上必须已安装node环境。windows安装相对简单,下载安装包安装就可以了。

新建package.json

package.json放在根目录下,它包含了该项目的一些元信息,如项目名称、描述、版本号,插件等。

grunt-contrib-jshint(js语法检查)

grunt-contrib-concat(js合并)

grunt-contrib-uglify(采用UglifyJS压缩js)

grunt-contrib-cssmin(Css压缩合并)

grunt-htmlhint(html语法验查)

以上都是常用的插件。

更多插件,请访问:http://gruntjs.com/plugins

插件安装

安装:uglify

npm install grunt-contrib-uglify

安装concat

npm install grunt-contrib-concat

安装:cssmin

npm install grunt-contrib-cssmin

插件安装完成后,查看根目录,会发现node_modules目录,包含了相应的插件目录。

新建Gruntfile.js

Gruntfile.js由以下内容组成

1、wrapper函数,结构如下,这是Node.js的典型写法,使用exports公开API

前端js和css的压缩合并之grunt

2、项目和任务配置

3、载入grunt插件和任务

4、定制执行任务

例如:

前端js和css的压缩合并之grunt

前端js和css的压缩合并之grunt

也可以单独压缩js和css,不进行合并,例如:

前端js和css的压缩合并之grunt

前端js和css的压缩合并之grunt

grunt api文档:http://gruntjs.com/api/grunt

grunt.initConfig方法

用于模块配置,它接受一个对象作为参数。该对象的成员与使用的同名模块一一对应。

每个目标的具体设置,需要参考该模板的文档。就cssmin来讲,minify目标的参数具体含义如下:

expand:如果设为true,就表示下面文件名的占位符(即*号)都要扩展成具体的文件名。

cwd:需要处理的文件(input)所在的目录。

src:表示需要处理的文件。如果采用数组形式,数组的每一项就是一个文件名,可以使用通配符。

dest:表示处理后的文件名或所在目录。

ext:表示处理后的文件后缀名。

grunt常用函数说明:

grunt.initConfig:定义各种模块的参数,每一个成员项对应一个同名模块。

grunt.loadNpmTasks:加载完成任务所需的模块。

grunt.registerTask:定义具体的任务。第一个参数为任务名,第二个参数是一个数组, 表示该任务需要依次使用的模块。

命令行执行grunt任务

进入到项目根目录,敲:

grunt

就会按Gruntfile配置的文件进行压缩合并。

也可以单独执行,例执行js压缩命令:grunt uglify

css压缩命令:grunt cssmin

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《前端js和css的压缩合并之grunt》的版权归原作者「web前端自学平台」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注web前端自学平台微信公众号

web前端自学平台微信公众号:gh_d79ea4fb97f3

web前端自学平台

手机扫描上方二维码即可关注web前端自学平台微信公众号

web前端自学平台最新文章

精品公众号随机推荐