Rumah hujung hadapan web html tutorial Grunt 认识 - 盛夏、光年

Grunt 认识 - 盛夏、光年

May 20, 2016 pm 01:49 PM

基本工作流:

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()

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Mar 04, 2025 pm 12:32 PM

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?

Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Mar 17, 2025 pm 12:27 PM

Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?

Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Mar 20, 2025 pm 06:05 PM

Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?

Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Mar 04, 2025 pm 02:39 PM

Bagaimana cara menambah kesan strok kepada imej PNG di laman web?

Apakah tujuan & lt; meter & gt; unsur? Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

Apakah tujuan & lt; meter & gt; unsur?

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Mar 17, 2025 pm 12:20 PM

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?

Apakah tujuan & lt; DATALIST & GT; unsur? Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

Apakah tujuan & lt; DATALIST & GT; unsur?

Apakah tujuan & lt; kemajuan & gt; unsur? Apakah tujuan & lt; kemajuan & gt; unsur? Mar 21, 2025 pm 12:34 PM

Apakah tujuan & lt; kemajuan & gt; unsur?

See all articles