JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
前端自动化,这样的一个名词听起来非常的有吸引力,向往力。当今时代,前端工程师需要维护的代码变得及为庞大和复杂,代码维护、打包、发布等流程也变得极为繁琐,同时浪费的时间和精力也越来越多,当然人为的错误也随着流程的增加而增加了更多的出错率。致使每一个团队都希望有一种工具,能帮助整个团队在开发中能精简流程、提高效率、减少错误率。随之讨论自动化部署也越来越多,并且国内很多大型团队也都有自己成熟的自动化部署工具。据我所知,百度有FIS,腾讯有Modjs,360有燕尾服,还有很多团队在使用Ant,Shell等。
--------------------------------
Grunt: JavaScript世界的构建工具 -- Grunt中文网
http://www.gruntjs.net/
grunt是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:压缩文件,合并文件,简单语法检查。
GRUNT JavaScript 世界的构建工具
为何要用构建工具?
一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。
为什么要使用Grunt?
Grunt生态系统非常庞大,并且一直在增长。由于拥有数量庞大的插件可供选择,因此,你可以利用Grunt自动完成任何事,并且花费最少的代价。如果找不到你所需要的插件,那就自己动手创造一个Grunt插件,然后将其发布到npm上吧。
先看看入门文档:http://www.gruntjs.net/getting-started 吧。
可用的Grunt插件
你所需要的大多数task都已经作为Grunt插件被开发了出来,并且每天都有更多的插件诞生。插件列表页面列出了完整的清单。
Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。
提前感受一下 Grunt 吧!
安装 grunt 虽然很简单,更多涉及到如何运行项目。看看下面的演示,这是为项目案例运行 grunt 后的输出。
---------------------------------
gulp.js - 基于流的自动化构建工具。 | gulp.js 中文网
http://www.gulpjs.com.cn/
用自动化构建工具增强你的工作流程!
易于使用
通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。
构建快速
利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。
插件高质
Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
易于学习
通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。
--------------------------------
介紹 | Webpack 中文指南
http://webpackdoc.com/
Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
--------------------------------
上面工具都依赖nodejs的命令,所以首先需要安装nodeJS环境,现在windows安装nodeJS直接下载即可:
Index of /download/release/latest/win-x64/
https://nodejs.org/download/release/latest/win-x64/
根据需要下载,下载完成后直接下一步下一步完成,就具有nodeJS环境了
JavaScript自动化构建工具grunt、gulp、webpack介绍的更多相关文章
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
- JavaScript自动化构建工具入门----grunt、gulp、webpack
蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css 需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动 自动化时代的程序员: 希望一切都可以自动完成 ...
- JavaScript 项目构建工具 Grunt 实践:安装和创建项目框架
Grunt 是一个基于任务的 JavaScript 项目命令行构建工具,运行于 Node.js 平台.Grunt 能够从模板快速创建项目,合并.压缩和校验 CSS & JS 文件,运行单元测 ...
- 前端自动化构建工具Grunt
一.了解Gurnt(http://www.open-open.com/lib/view/open1433898272036.html) Grunt 是一个基于任务的JavaScript工程命令行构建工 ...
- 自动化构建工具grunt的学习
关于grunt的一些记录,记的比较乱... 0.删除node_modules文件夹 命令行: npm install rimraf -g //先运行 rimraf node_modules //然后运 ...
- 前端打包/自动化构建工具:gulp
glup可以进行打包,并且可以实现类似/script/test-adsf123.js或者/script/test.js?v=asdf123 参考: http://www.ydcss.com/archi ...
- grunt,gulp,webpack前端打包工具的特性
1.http://www.cnblogs.com/lovesong/p/6413546.html (gulp与webpack的区别) 2.http://blog.csdn.net/qq_3231263 ...
- 浅谈自动化构建之grunt
自动化构建 开发行业的自动化构建 一句话把源代码转化为生产代码,作用是脱离运行环境兼容带来的问题开发阶段使用提高效率的语法,规范 和标准,构建转换那些不被支持的特性转化成能够执行的代码. 一.简单的自 ...
- gulp前端自动化构建工具
博主不易,不求赞赏,希望把自己遇到的难点写出来,以及希望自己能有能力写出一篇不错的博文. 前端构建工具本人 bootstrap+jquery用gulp vue+element 用webpack 引文 ...
随机推荐
- 更改kvm虚拟机磁盘大小
kvm 虚拟机的磁盘大小可通过命令:qemu-img resize filename size 来改,要注意的是resize只支持raw格式的磁盘文件,如果想更改qcow2等格式的磁盘大小,需先用qe ...
- easyui - using
using 是 easyloader.load 简写 using('calendar', function() { alert("加载calendar成功 ...
- c++define的用法
c++define的用法 在写程序时经常会碰到这样一个问题,我们需要重复写很多相同的代码,并且这些代码结构相同.总是想自己把这段代码封装一下然后直接进行调用,但是如果这段代码逻辑并不复杂,并且代码 ...
- 【OCP-12c】CUUG 071题库考试原题及答案解析(21)
3.choose three View the Exhibit and examine the description of SALES and PROMOTIONS tables. You want ...
- enumerate 和 dict.items()
对 list 遍历 a_list = [1,2,3] for index,iterm in enumerate(a_list): print(index,iterm) 对 dict 遍历 dict = ...
- 用flask实现一个用户登录的功能
#!/usr/bin/python #coding=utf-8 from flask import Flask,session,redirect,url_for,request app=Flask(_ ...
- JAVA数组的定义方式
JAVA中,数组有以下几种定义方式: 1.先定义数组中元素的个数,然后再进行元素赋值 int[] a=new int[2]; a[0]='a'; a[1]='b';a[2]='c'; 2.元素个数与元 ...
- Markdown入门简介
参考 http://sspai.com/25137 作者: Te_Lee 文章来源: 少数派 Markdown入门简介(使用工具Haroopad) 一.使用的工具----haroopad(http:/ ...
- 二手前端入门React项目
个人对ReactJS这门技术比较感兴趣,在基友的帮助下成功创建了一个React标准前端工程,过程中遇到了不少麻烦,今天作为笔记一般记录一下遇到的问题和解决方案. 基础环境 手头一台Mac 使用OSX系 ...
- Linux之virtualbox中的ubuntu虚拟机linux系统共享文件夹
windows通过virtualbox软件与linux系统机型文件共享 1.第一步 在设置中找到共享文件夹选项,选择添加共享文件夹 2.第二步 选择需要与linux进行共享的文件夹,并选择固定分配 3 ...