首页 web前端 html教程 Grunt 认识_html/css_WEB-ITnose

Grunt 认识_html/css_WEB-ITnose

Jun 24, 2016 am 11:19 AM

基本工作流:

JS合并、JS压缩、CSS压缩、CSS Sprite、图片优化、测试、静态资源缓存(版本更新)...

基于工作流产生的工具:

JSHint(jshint.com)、CSSLint(csslint.net)、jade(jade.tilab.com)、coffeeScript(coffee-script.org/)、requireJs/seaJs、compass/less/sass ...

Grunt就是解决各种工具组合而形成系统工作流的解决方案

安装

nodeJs --> npm --> grunt --> package.json --> 安装插件Grunt相关插件 --> Gruntfile.js

nodeJs : 可使用homeBrew安装,也可以官网安装 brew install node(附带npm)

grunt : npm install -g grunt-cli(卸载:npm uninstall grunt)

package.json : 用于nodeJs包管理(比如grunt插件安装管理) npm init 开始填写项目名称、版本号、git信息、作者等信息

安装grunt相关插件 : 合并文件(grunt-contrib-contact)、语法检查(grunt-contrib-jshint)、Sass编译(grunt-contrib-sass)、压缩js文件(grunt-contrib-uglify)、监听文件变化(grunt-contrib-watch)、建立本地服务器(grunt-contrib-connect)

安装grunt到项目命令 : npm install grunt --save-dev(npm install grunt表示安装到当前项目,--save-dev表示安装grunt信息添加至package.json中,在package.json显示为"devDenpendencies" : {"grunt" : "^1.0.0"}表示当前项目依赖grunt,版本为1.0.0)

安装grunt相关插件到项目命令 : npm install --save-dev grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect表示把相关插件到项目中,一个插件对应一个任务

配置

Gruntfile.js : 配置Gruntfile.js,写入任务

任务:Mulit Tasks( grunt.initConfig({key : value})  ) 和 Baisc Tasks

配置Gruntfile.js语法 : 所有的代码包裹在 module.exports = function (grunt) { ... };里面的代码主要分为:任务配置(也可不必要,比如Baisc Tasks)、插件加载、任务注册。实现:用grunt注册一个任务从而更具根据任务配置调用加载的插件来执行相应的操作

Mulit Tasks : 有所谓的target 且每个Mulit Task都必须有一个task 如 : grunt.initConfig({concat : {foo : { ... }, bar : { ... }}, uglify : {bar : {}}})  concat任务有foo和bar两个target,而uglify只有一个target,target名字可以更换(但是任务的名称是固定的,比如concat对应相关的插件),现在运行grunt concat:foo或grunt concat:bar分别表示运行foo或bar指定的的concat任务 只运行grunt concat将会遍历concat的targets按顺序运行

Baisc Tasks : 直接注册任务 grunt.register(taskName,taskFunction) 如 : grunt.register("foo", function (arg1, arg2) { ... }) 运行grunt foo 或者 grunt foo:a:b a和b是传递给foo的参数

任务配置 : 调用插件配置要执行的任务和实现的功能

Baisc Tasks : 不需要任务配置

插件加载 : 加载所需的插件 grunt.loadNpmTasks()

任务注册 : 注册一个任务,包含之前的任务配置代码 grunt.registerTasks()

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? 公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?

如何使用HTML5表单验证属性来验证用户输入? 如何使用HTML5表单验证属性来验证用户输入? Mar 17, 2025 pm 12:27 PM

如何使用HTML5表单验证属性来验证用户输入?

< iframe>的目的是什么。 标签?使用时的安全考虑是什么? < iframe>的目的是什么。 标签?使用时的安全考虑是什么? Mar 20, 2025 pm 06:05 PM

< iframe>的目的是什么。 标签?使用时的安全考虑是什么?

如何高效地在网页中为PNG图片添加描边效果? 如何高效地在网页中为PNG图片添加描边效果? Mar 04, 2025 pm 02:39 PM

如何高效地在网页中为PNG图片添加描边效果?

< meter>的目的是什么。 元素? < meter>的目的是什么。 元素? Mar 21, 2025 pm 12:35 PM

< meter>的目的是什么。 元素?

< datalist>的目的是什么。 元素? < datalist>的目的是什么。 元素? Mar 21, 2025 pm 12:33 PM

< datalist>的目的是什么。 元素?

> gt;的目的是什么 元素? > gt;的目的是什么 元素? Mar 21, 2025 pm 12:34 PM

> gt;的目的是什么 元素?

视口元标签是什么?为什么对响应式设计很重要? 视口元标签是什么?为什么对响应式设计很重要? Mar 20, 2025 pm 05:56 PM

视口元标签是什么?为什么对响应式设计很重要?

See all articles