Grunt-beginner前端自动化工具-高清视频

【课程介绍】:

作为一名开发人员,在WEB前端项目开发中,重复而枯燥的工作太多,Grunt自动化的项目构建工具,帮你解决这些问题,对重复执行的任务像压缩,合并,编译,单元测试及代码检查等, 通过配置Grunt自动化工具,可以减轻您的劳动,简化您的工作。

【课程须知】:

1.想提高运行前端开发工作流程 ; 2.有一些项目开发经验,效果会更好。

【你能学到什么?】

1. Grunt工具和插件的安装 2. 如何进行项目配置 3. 如何配置任务 4. 如何执行任务 5. Grunt的使用

【课程提纲】:

第1章 课程介绍
介绍什么是前端集成解决方案,目前流行的是哪几种,主流方案即yeoman,bower,grunt的组合。而grunt只能算是build Tools, 构成竞争的几种主流的build Tools 包括 Ant, Buildy, Gmake, Jammit, Jasy, Rake, Sprockets,Gulp。 通过学习本课程力争让大家学习到现代web项目的思想,进而在自己的项目中整合进集成…

第2章 准备工作
简单介绍NodeJS环境及其安装,Grunt基于NodeJS构建;Yeoman, Bower, Grunt的安装方法,及安装成功与否验证。

第3章 Yeoman实践
引导大家阅读Yeoman生成的WebApp代码, 详解各个文件的作用,穿插讲解editconfig,以及代码规范。

第4章 Bower实践
演示如何使用Bower安装Jquery 和 bootstrap相关的js和css文件, 详解Bower的配置文件。

第5章 Grunt实践
对于已有的Grunt项目我们如何将其跑起来;已有的未使用Grunt构建的项目,如何将Grunt强大的能力引入其中,讲讲npm的核心package.json,如何安装Grunt的插件,如何一步到位编写Grunt的配置文件及配置文件各项详解。

第6章 Grunt – plugins
本章除了能愉快地掌握怎样为grunt编写,贡献插件。我们还将一窥开源生态,学习如何通过github快速构建自己的项目,并搭建主页推介出去。最最重要的,这一节已请佛祖开光,大家快来一窥究竟吧。

第7章 扩展知识介绍
相同的任务使用 Gulp 和 npm 如何实现,比较三者优劣。

第8章 课程总结
通过本课程我们切实了解了现代Web的开发方式以及最前沿的集成解决方案。后续希望能跟大家聊一聊那些让我们的开发事半功倍的前端工具。

=======================================

下载地址:http://www.aliyue.net

注: 打开后搜索你要下载的就可以下载了

========================================

时间: 2024-09-29 16:53:52

Grunt-beginner前端自动化工具-高清视频的相关文章

前端自动化工具 grunt 插件的简单使用(一)

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

前端自动化工具 -- fis 使用简介

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

HTML5技术分享:前端自动化工具推荐

随着前端开发技术的不断发展,前端开发工作也变得越来越复杂,如果能合理地采用一些自动化的工具,生活要容易得多. LiveReload 我目前的开发主力机是一台较早的 13寸 Macbook Pro,外加一台戴尔的显示器.相信做前端开发的都知道,这多出来的一台显示器对工作效率的提升有多大. LiveReload 技术+两块显示屏可以帮你省去重复刷新浏览器这一枯燥的工作.目前实现 LiveReload 的方式很多,如果你倾向于图形化的桌面应用,可以尝试一下 LiveReload.app, 地址是:ht

前端自动化工具 -- grunt 使用简介

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

前端自动化工具 -- gulp 使用简介

gulp是基于流的前端自动化构建工具. 之前也谈到了 grunt的用法,grunt其实就是配置+配置的形式. 而gulp呢,是基于stream流的形式,也就是前一个函数(工厂)制造出结果,提供后者使用. 同样的,也是包括基本用法和各插件的使用. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到某一工程目录下 跟grunt一般,也是需要package.json包依赖文件和一个入口文件 g

前端自动化工具

前端自动化 1. 以下都是用淘宝 npm -> cnpm ======================================================== 1. YEOMAN: http://yeoman.io/ : 构建项目脚手架 安装: cnpm install -g yo 检查版本: yo --version 2. Bower: https://bower.io/ : WEB 包管理器 安装: cnpm install -g bower 检查版本: bower -v 3.

gulp 前端自动化工具

一开篇 在前端开发的过程中,我们经常会碰到压缩.合并.图片script 等,于是就有了gulp 前端自动化构建工具,它能帮你在前端开发中,节省时间. 1,安装 node.js 因为gulp 构建工具是基于node环境的,那么什么是 node.js呢,下面是官方的解释Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.js 的包管理器 npm,是全球最大的开源库生态系统. 用

(转)Bootstrap 之 Metronic 模板的学习之路 - (7)GULP 前端自动化工具

https://segmentfault.com/a/1190000006738327 初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了.考虑到实际项目应用时,会有很多文件需要修改调整并压缩处理,这时候我们就会用到我们的<前端自动化神器 (Gulp)>,鉴于 gulp 的内容比较多,为了不打乱 Metronic 系列,就单独列了一篇<初探前端自动化神器 (Gulp)>.本文不对 gulp 进行详细阐述,只保留和 Metronic 相关部分. Gulp is

前端自动化工具 grunt 插件 jshint 的简单使用(四)

一.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