前端开发Grunt工具的安装使用
随着前端开发效果越来越丰富,前端的结构也越来越复杂,这个时候就需要一个工具来进行管理,可以帮你做语法校验,文件拼接,代码压缩,文件清理等等琐事,Grunt就是这么一个不错的工具。
安装并不复杂,只要先安装nodejs和npm即可,这里介绍Ubuntu上的安装过程,不过Windows平台更加简单,去nodejs的官网下载一个稳定版本安装一下就完事了。
sudo apt install nodejs npm //安装nodejs,npm
sudo npm install -g grunt-cli //安装grunt的全局客户端
sudo ln -s /usr/bin/nodejs /usr/bin/node //解决找不到node文件或者文件夹错误
做完这些步骤,grunt就安装完毕了,可以通过node -v和npm -v来查看版本,注意不要用版本太低的版本,下载了其他库之后容易造成不兼容的问题。通过源上安装的,一般都是最新的稳定版本。
使用方法这里介绍一下,grunt的配置文件主要包含两个Gruntfile.js和package.json,其中Gruntfile.js就是我们用来编写执行脚本的文件,package.json则是用来保持项目基本配置信息的文件。通过执行
sudo npm init
可以开启一个初始化过程,在过程里可以填写项目的一些基本信息,也可以自己手动创建这个文件
//文件范例,也可以定义一些自定义的参数,遵循JSON的语法即可
{
"name": "demo", //项目名称
"version": "0.1.0", //版本号
"description": "demo", //项目描述
"license": "MIT", //协议
"devDependencies": { //使用的库的版本
"grunt": "^0.4.5",
"grunt-cmd-transport": "~0.5.0",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-concat": "~0.5.0",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-requirejs": "~0.4.1",
"grunt-contrib-uglify": "~0.2.1",
"grunt-strip": "~0.2.1"
},
"dependencies": {
"express": "3.x"
}
}
其中devDependencies节点一般不需要自己的填写。这个在安装库的时候,在命令尾部添加--save-dev会自动添加到这个节点。
常用的库包括以下几个:
sudo npm install grunt --save-dev
sudo npm install grunt-contrib-uglify --save-dev //使用uglifyJS进行js代码压缩
sudo npm install grunt-contrib-clean --save-dev //用于清理文件或者文件夹
sudo npm install grunt-contrib-copy --save-dev //复制文件和文件夹
sudo npm install grunt-contrib-jshint --save-dev //javascript 语法验证
sudo npm install grunt-contrib-contcat --save-dev //合并文件
sudo npm install grunt-contrib-cssmin --save-dev //压缩css文件
sudo npm install grunt-contrib-less --save-dev //把less文件编译为css文件
sudo npm install grunt-contrib-requirejs --save-dev //使用r.js优化RequireJS 项目
sudo npm install grunt-contrib-comprass --save-dev //使用Compass编译Sass
sudo npm install grunt-contrib-sass --save-dev //编译Sass文件
sudo npm install grunt-contrib-csslint --save-dev //语法验证css文件
sudo npm install load-grunt-tasks --save-dev //运用package.json中的配置加载插件的插件
关于Gruntfile.js的文件结构如下范例
/*!
* XXX's Gruntfile
*/
module.exports = function(grunt) {
'use strict'; grunt.initConfig({
pkg: grunt.file.readJSON('package.json'), // Metadata.
meta: {
libPath: 'lib/',
distPath: 'dist/',
jsPath: 'js/',
sassPath: 'sass/',
examplesPath: 'examples/hello/'
}, banner: '/*!\n' +
' * =====================================================\n' +
' * XXX v<%= pkg.version %> (<%= pkg.homepage %>)\n' +
' * =====================================================\n' +
' */\n', clean: {
all: ['<%= meta.distPath %>']
}, concat: {
xxx: {
options: {
banner: '<%= banner %>'
},
src: [
'js/a.js',
'js/b.js'
],
dest: '<%= meta.distPath %>js/<%= pkg.name %>.js',
}
}, copy: {
fonts: {
expand: true,
src: 'fonts/xxx*.ttf',
dest: '<%= meta.distPath %>/'
},
examples: {
expand: true,
cwd: '<%= meta.distPath %>',
src: ['**/xxx*'],
dest: '<%= meta.examplesPath %>'
}
}, cssmin: {
options: {
banner: '', // set to empty; see bellow
keepSpecialComments: '*', // set to '*' because we already add the banner in sass
sourceMap: false
},
xxx: {
src: '<%= meta.distPath %>css/<%= pkg.name %>.css',
dest: '<%= meta.distPath %>css/<%= pkg.name %>.min.css'
}
}, uglify: {
options: {
banner: '<%= banner %>',
compress: {},
mangle: true,
preserveComments: false
},
mui: {
src: '<%= concat.xxx.dest %>',
dest: '<%= meta.distPath %>js/<%= pkg.name %>.min.js'
}
}, jshint: {
options: {
jshintrc: 'js/.jshintrc'
},
grunt: {
src: ['Gruntfile.js', 'grunt/*.js']
},
src: {
src: 'js/*.js'
}
},
csslint: {
options: {
csslintrc: 'sass/.csslintrc'
},
src: [
'<%= meta.distPath %>/css/<%= pkg.name %>.css',
]
}
});
// Load the plugins
require('load-grunt-tasks')(grunt, {
scope: 'devDependencies'
});
// Default task(s).
grunt.registerTask('cleanAll', ['clean']);
grunt.registerTask('dist-css', [ 'cssmin', 'clean:sourceMap']);
grunt.registerTask('dist-js', ['concat', 'uglify']);
grunt.registerTask('dist', ['clean:all', 'dist-css', 'dist-js', 'copy']);
grunt.registerTask('build', ['dist']);
grunt.registerTask('default', ['dist']);
};
一般常用的包括文件及文件夹清理,css文件校验,css文件合并,css文件压缩,js文件校验,js文件合并,js文件压缩,文件拷贝等几个功能。学会使用这几个功能就可以满足大部分的前端打包需求了。
另外,针对jshint的校验,经常会碰到的问题及处理方法
(1)Mixed double and single quotes /* jshint -W110 */
(2)'{a}' is defined but never used /* jshint unused:vars, -W004 */
(3)Don't make functions within a loop /* jshint loopfunc:true */
(4)Confusing use of '!' /* jshint -W018 */
(5)“‘{a}’ is not defined.”:“‘{a}’没有被定义”,针对一些全局变量可以使用/*global Q:true*/申明跳过该检查
(6)‘eval is evil.’:“尽量不要使用eval”, /*jshint -W061 */
另外,使用jshint还需要一个配置文件.hshintrc也放上来供大家参考
{
"asi": true,
"browser": true,
"node": true,
"jquery": true,
"esnext": true,
"strict": false,
"globalstrict": true,
"quotmark": true,
"undef": true,
"unused": true,
"scripturl": true,
"expr":true,
"shadow":true,
"-W014": false,
"globals": {
"define": false,
"module": true,
"export": true,
"console": false,
"alert":true,
"Q":true
}
}
csslint也需要一个这样的配置文件,
{
"important": false,
"adjoining-classes": false,
"known-properties": false,
"box-sizing": false,
"box-model": false,
"overqualified-elements": false,
"display-property-grouping": false,
"bulletproof-font-face": false,
"compatible-vendor-prefixes": false,
"regex-selectors": false,
"errors": false,
"duplicate-background-images": false,
"duplicate-properties": false,
"empty-rules": false,
"selector-max-approaching": false,
"gradients": false,
"fallback-colors": false,
"font-sizes": false,
"font-faces": false,
"floats": false,
"star-property-hack": false,
"outline-none": false,
"import": false,
"ids": false,
"underscore-property-hack": false,
"rules-count": false,
"qualified-headings": false,
"selector-max": false,
"shorthand": false,
"text-indent": false,
"unique-headings": false,
"universal-selector": false,
"unqualified-attributes": false,
"vendor-prefix": false,
"zero-units": false
}
前端开发Grunt工具的安装使用的更多相关文章
- Web前端开发必备工具推荐
http://gaohaixian.blog.163.com/blog/static/12326010520114265223489/不管你做前端开发还是网页重构,前端工具都起着非常重要的作用,这里向 ...
- Brackets前端开发IDE工具
Brackets是一个开源的前端开发IDE工具,网页设计师和前端开发人员必备的前端开发IDE工具. 它能够使你在开发WEB网站实时预览你的网页,目前版本只适用于Chrome浏览器可以实时预览效果 支持 ...
- 前端开发构建工具gulp的安装使用
曾几何时还在使用grunt作为前端的构建工具,直到有一天同事向我推荐了gulp,在这里博主将不讨论gulp与grunt各自优势的比较,只为大家介绍gulp如何安装和使用. Gulp 是用 nodejs ...
- 关于WEB前端开发的工具
俗话说:"工谷善其事,先必利其器."一个用得顺手的工具,确实能为我们的开发带来方 便,更重要的是会让我们更加享受工具开发过程中所带来的乐趣. 1.编码工具: 记事本之类的编辑器都可 ...
- vscode-wechat 小程序开发提示工具 vscode 安装
vscode 安装 vscode-wechat vscode-wechat 小程序开发提示工具 ---- 有了小程序开发提示,开发很方便 https://segmentfault.com/a/1190 ...
- 前端开发 Grunt 之 Connect
在前端开发过程中,我们需要在开发过程中,将开发中的站点部署到服务器上,然后,在浏览器中查看实际的效果,在 Grunt 环境下,可以直接使用集成在 Grunt 中的 Connect 插件完成站点服务器的 ...
- 前端开发 Grunt 之 Connect详解
在前端开发过程中,我们需要在开发过程中,将开发中的站点部署到服务器上,然后,在浏览器中查看实际的效果,在 Grunt 环境下,可以直接使用集成在 Grunt 中的 Connect 插件完成站点服务器的 ...
- 如何精准高效的实现视觉稿?------前端开发辅助工具AlloyDesigner使用介绍
AlloyDesigner:http://alloyteam.github.io/AlloyDesigner/ 介绍:AlloyDesigner是腾讯开发的一款工具,其在页面构建过程中,直接嵌入开发的 ...
- Dawn 阿里开源前端开发构建工具
Dawn 取「黎明.破晓」之意,原为「阿里云·业务运营团队」内部的前端构建和工程化工具,现已完全开源.它通过pipeline 和 middleware 将开发过程抽象为相对固定的阶段和有限的操作,简化 ...
随机推荐
- CS5265完美替代CH7211|Type-C转HDMI2.0单转方案|CH7211替代方案
龙迅Chrontel的CH7211是一款Type-C转HDMI2.0半导体设备,可通过USB Type-C连接器将DisplayPort信号转换为HDMI/DVI.这款创新的基于USB Type-C的 ...
- ORA-09925:Unable to create audit trail file 数据库启动失败
问题描述:生产库停机加内存和CPU,重启完服务器,启动数据库报错. ORA-09925: Unable to create audit trail file Linux-x86_64 Error 2: ...
- Java高效开发-fiddler抓包工具
1.简介 Fiddler是最常用的抓包工具之一,只要打开之后就能够实现数据包抓取,关闭之后会自动取消代理,非常方便本地调试 2.下载 阿里云盘地址:https://www.aliyundrive.co ...
- 浅议像素化与体素化Part.1——平面图形像素化
什么是像素化 学计算机的人往往都比较清楚图形和图像的区别,而且往往能够从数据结构的角度理解这两者的区别,一般来说,图形是由几何空间中的基本图元所组成,表现为用外部轮廓线条勾勒成的矢量图.例如由计算机绘 ...
- centos7 安装locate
使用locate my.cnf命令可以列出所有的my.cnf文件 yum -y install mlocate 原因是安装完后没有更新库 更新库:updatedb
- PowerShell【IF篇】
1 [int]$num=0 2 do 3 { 4 $num+=1 5 if($num%2) 6 { 7 "$num"+" 是奇数" 8 }else{ 9 &qu ...
- 读取 properties 配置文件含有中文的value内容 导致中文乱码 的解决办法
1.前言 因为装系统的时候把中文写在了系统路径,现在我想把这个路径写在properties里面来读取,可是 发现java 读取会导致中文乱码成 问号????的乱码 ,百度找了好多博客,基本都是一摸一 ...
- Java实现163邮箱发送邮件到QQ邮箱
注:图片如果损坏,点击文章链接:https://www.toutiao.com/i6812973124141711876/ 先创建一个maven的普通项目 添加依赖,附在文档末尾 其中几个注意的地方 ...
- 关于MySQL中group by的一些问题的记录
only full group by问题的解约方案 这个报错的原因是,在SQL语句中,你查询的字段应该是你分组的依据,即select的column应该全部跟在group by之后.这个也和MySQL的 ...
- 微软的Serialize和Newtonsoft的SerializeObject比较
微软的序列化反序列化组件出来已有好几年了,刚出来的时候各种吐槽.最近在优化代码,比较了一下微软的Serialize和Newtonsoft的SerializeObject,感觉大部分场景下可以用微软的序 ...