前端自动化工具:Grunt使用教程

Grunt 的简介: Grunt 是一套前端自动化工具,是一个基于 node.js 的命令行工具,它一般用于: 1.压缩文件: 2.合并文件: 3.简单的语法检测: 4.监听文件变动: 5.less 编译: PS:Grunt 官网 (https://gruntjs.com/).Grunt  就像是一个工具箱,拥有非常丰富的任务插件,可以帮助开发人员实现各种各样目标任务的构建.在Grunt工具箱中,按目标任务类型我们可以分为: 1.编译文档型:比如编译 LESS.Sass.Stylus.Coffe

grunt是什么,grunt就是个东西.. grunt作为一个前端构建工具,有资源压缩,代码检查,文件合并等功能. 下面就简单了解grunt的使用. 一.环境配置 grunt是基于nodejs的,所以需要一个 nodejs 环境,未了解的可以 来这看看 还是在windows下, 首先要保证grunt命令可以使用,所以要先使用npm安装对应CLI npm install -g grunt-cli 安装完成可以命令行中输入“grunt”测试是否安装成功 安装成功后 二.用法说明 grunt需要pac

一.contrib-jshint 插件的使用 1.安装 "grunt-contrib-jshint "插件命令(在终端进入到项目根目录执行) npm install grunt-contrib-jshint --save-dev 2.在项目根目录下提供 jshint 插件任务配置需要的 src 目录和需要被检测的源文件(js 源文件放置到 src 目录下) mkdir src 3.在 Gruntfile.js 文件中对 jshint 任务进行配置 // 包装函数module.expor

一.contrib-concat 插件的使用 1.安装 "grunt-contrib-concat "插件命令(在终端进入到项目根目录执行) npm install grunt-contrib-concat --save-dev 2.在项目根目录下提供 concat 插件配置需要的 src 目录和需要被合并的源文件(合并源文件放置到 src 目录下) mkdir src 3.在 Gruntfile.js 文件中对 concat 任务进行配置 // 包装函数module.exports

一.contrib-htmlmin 插件的使用 1.安装 "grunt-contrib-htmlmin "插件命令(在终端进入到项目根目录执行) npm install grunt-contrib-htmlmin --save-dev 2.在项目根目录下提供 htmlmin 插件任务配置需要的 src 目录和需要被压缩的源文件(html 源文件放置到 src 目录下) mkdir src 3.在 Gruntfile.js 文件中对 htmlmin 任务进行配置 // 包装函数modul

一.contrib-imagemin 插件的使用 1.安装 "grunt-contrib-imagemin "插件命令(在终端进入到项目根目录执行) npm install grunt-contrib-imagemin --save-dev 2.在项目根目录下提供 imagemin 插件任务配置需要的 src 目录和需要被压缩的图片文件(图片文件放置到 src 目录下) mkdir src 3.在 Gruntfile.js 文件中对 imagemin 任务进行配置 // 包装函数mod

一.contrib-watch 插件的使用 1.安装 "grunt-contrib-watch "插件命令(在终端进入到项目根目录执行) npm install grunt-contrib-watch --save-dev npm install grunt-contrib-concat --save-dev npm install grunt-contrib-uglify --save-dev 2.在项目根目录下提供 watch 插件任务配置需要的 src 目录和源文件(源文件放置到

一.contrib-concat 和 contrib-uglify 插件的联合使用 1.安装 concat 和 uglify 插件命令(在终端进入到项目根目录执行) npm install grunt-contrib-concat  --save-dev npm install grunt-contrib-uglify  --save-dev 2.在项目根目录下提供 concat 和 uglify 插件任务配置需要的 src 目录和需要被合并的源文件(合并源文件放置到 src 目录下) mkdi

FIS也是一个新生的前端自动化工具,好下面就来简单介绍一下,真的好简单介绍啊.. 个人觉得FIS已经囊括了一个“大前端”的范畴. 先来看看别人怎么看FIS和Grunt和Gulp F.I.S在实际项目中的应用体验如何? 前端工具里面gulp和fis,有哪些优缺点? FIS和Grunt的区别 FIS入门很简单,提高难度也不大,因为官方已经提供了非常多的文档 围绕着最基本的三条命令 fis install <name> fis release [options] fis server <com