摘要: 大部分项目在部署之前都需要做的就是js.css文件的压缩.合并,以及一些文件的错误检查,甚至是将LESS文件转换成css文件,coffeescript文件转化成js文件等等.但是项目开发是分迭代的,没开发完一次,上面的工作要重新做一遍.那有什么工具能帮助我们来做这些重复的工作呢?Grunt就是其中一个非常好用的工具.下面就来学习一下Grunt. 安装: Grunt是基于node.js,所以你先安装node.js,安装完之后,只需要执行下面的命令就可以安装Grunt npm install…

前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为庞大和复杂,代码维护.打包.发布等流程也变得极为繁琐,同时浪费的时间和精力也越来越多,当然人为的错误也随着流程的增加而增加了更多的出错率.致使每一个团队都希望有一种工具,能帮助整个团队在开发中能精简流程.提高效率.减少错误率.随之讨论自动化部署也越来越多,并且国内很多大型团队也都有自己成熟的自动化部…

摘要:  gulp与grunt一样,都是自动构建工具.和grunt相比它更突出一个流的概念,任务是一个接一个执行的.今天就分享如何用gulp做自动化. 安装: gulp也是基于node环境,所以安装gulp之前你需要安装node.js.  npm install -g gulp 只要在命令窗口中执行上面一行命令就完成安装,这样安装的是全局安装.在项目中一般是通过package.json中的devDependencies属性来安装.如下: { "name": "",…

前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为庞大和复杂,代码维护.打包.发布等流程也变得极为繁琐,同时浪费的时间和精力也越来越多,当然人为的错误也随着流程的增加而增加了更多的出错率.致使每一个团队都希望有一种工具,能帮助整个团队在开发中能精简流程.提高效率.减少错误率.随之讨论自动化部署也越来越多,并且国内很多大型团队也都有自己成熟的自动化部…

什么是Grunt? grunt是javascript项目构建工具,在grunt流行之前,前端项目的构建打包大多数使用ant.(ant具体使用 可以google),但ant对于前端而言,存在不友好,执行效率低,学习成本高的问题.所以最近几年对于前端构建工具--grunt就应运而生. Grunt能做什么呢? 按任务目标大致可分为四类:   1. 文件操作型:比如合并.压缩js和css文件等(包括). 2. 预编译型:比如编译less.sass.coffeescript等. 3. 类库项目构建型:比如…

关于node.js和npm,cnpm的安装记录以及gulp自动构建工具的使用   工作环境:window下 在一切的最开始,安装node.js (中文站,更新比较慢http://nodejs.cn/)(外文站,最新的资料,但是打开可能比较慢https://nodejs.org/en/download/) 这里是一篇知乎的关于node.js是什么的文https://www.zhihu.com/question/33578075 简单的来说,它是JavaScript运行环境.更加深入,无法理解事件:…

项目管理及自动构建工具Maven 一.Maven安装.目录结构.cmd命令1.下载安装apache-maven-3.2.3-bin.zip下载:http://maven.apache.org/download.cgi 安装:解压,配置环境变量M2_HOME=D:\Idea\config\apache-maven-3.2.3Path+=D:\Idea\config\apache-maven-3.2.3\bin 通过执行 mvn -v 可以查看当前版本号 C:\Users\yuki>mvn -v A…

XMake是一个跨平台自动构建工具,支持在各种主流平台上构建项目,类似cmake.automake.premake,但是更加的方便易用,工程描述语法更简洁直观,支持平台更多,并且集创建.配置.编译.打包.安装.卸载.运行于一体. 在线文档 在线源码 支持特性 支持windows.mac.linux.ios.android等平台,自动检测不同平台上的编译工具链(也可手动配置) 编译windows项目采用原生vs的工具链,不需要使用cygwin.mingw(当然这些也支持) 支持自定义平台编译配置,…

 Grunt 是一个基于任务的 JavaScript 项目命令行构建工具,运行于 Node.js 平台.Grunt 能够从模板快速创建项目,合并.压缩和校验 CSS & JS 文件,运行单元测试以及启动静态服务器. 安装 Grunt 推荐 Windows 用户使用 Git Shell 来进行命令行操作.安装 Windows 桌面版 GitHub 的时候会自动安装 Git Shell. GitHub for Windows 下载地址:http://windows.github.com Grunt…

Java世界中主要有三大构建工具:Ant.Maven和Gradle.经过几年的发展,Ant几乎销声匿迹.Maven也日薄西山,而Gradle的发展则如日中天. Maven的主要功能主要分为5点,分别是依赖管理系统.多模块构建.一致的项目结构.一致的构建模型和插件机制.我们可以从这五个方面来分析一下Gradle比起Maven的先进之处. 依赖管理系统 Maven为Java世界引入了一个新的依赖管理系统.在Java世界中,可以用groupId.artifactId.version组成的Coordin…

一.了解Gurnt(http://www.open-open.com/lib/view/open1433898272036.html) Grunt 是一个基于任务的JavaScript工程命令行构建工具. Grunt和Grunt插件,是通过npm安装并管理的,npm是Node.js的包管理器. 了解Grunt前,首先要准备两件事: 1.了解npm(Node Package Manager):npm是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准. 2.安装nod…

gruntJs——构建工具:代码压缩.文件合并 安装流程: 1.到nodeJs官网下载安装nodeJs(附带了npm包管理工具) 2.cmd命令行:npm install -g grunt-cli // 全局安装 npm install grunt --save-dev    //作为项目的开发依赖(devDependencies)安装 grunt -version    //查看版本号(检查是否安装成功) 文件合并: 1.在需要合并的文件同一级创建package.json配置文件(内容见gru…

之前也介绍过前端构建工具 Ant 和 Yeoman,其中 Yeoman 工具就包含了 Grunt 所以就不多说.那么与 Ant 相比 Grunt 有这么几个优点: Javascript 语法,相比 Ant 的 XML 写起来更简洁更顺手: 任务模块资源丰富,如代码合并.压缩.检测.JSDoc.单元测试等你能想到的都可以找到: 文档丰富,从入门使用,到高级定制,都有相应的使用说明: 上手容易,Grunt 以及 Grunt 的任务模块都是通过 npm 进行安装和管理,配置简单. 一.安装 Grunt…

好啦,今天来和大家谈谈grunt 害怕与社会脱轨,所以自己研究了一下,简单说说我梳理完的grunt 首先要知道为什么使用grunt 1.grunt可以检测js.css文件内部是否有错误 2. grunt可以进行js.css\html...的压缩 3. grunt可以watch这些文件,就是监控这些文件,就像sass一样,源文件有变换,转化后的css会跟着变.也就是说,js.或css等源文件有变化,压缩的文件会跟着变 首先,grunt和vue一样,环境用的node,也需要全局安装 npm inst…

第一:什么是Ant? Apache Ant是一个基于Java的生成工具.据最初的创始人James Duncan Davidson的介绍,这个工具的名称是another neat tool(另一个整洁的工具)的首字母的缩写. 第二:到哪儿去找ant工具,地址:http://ant.apache.org/bindownload.cgi 第三:配置环境变量:如下图: 第四:用命令行测试下: 如果出现上述界面则证明Ant配置成功 第五:Ant的作用是什么? 生成工具在软件开发中用来将源代码和其他的输入文…

打包的目的和意义就不用叙述了直接上干货 http://www.gruntjs.net/getting-started里面的教程也太简单了,需要下一番功夫去研究才行.本文将grunt打包的常用方法都用实例描述,更加清晰易懂. 1.    第一个简单的grunt打包 1)需要安装nodejs:http://www.cnblogs.com/chuaWeb/p/nodejs-npm.html 本人的nodejs工程目录为F:\chuaNodejs(后续所有相对路径都是相对于这个目录) 2)命令行到nod…

gulp是一个自动化的前端工具.它可以利用自身的插件来实现一些功能,如sass.less编译:浏览器自动刷新,文件压缩.重命名.代码校验(个人使用sublime的插件进行校验)等功能.当然这些功能也可以通过其他手段来实现,但是gulp实现的功能比较全面.快速.而且具有选择性(每个人都可以利用它来实现自己需要的功能). 1.gulp安装 1)首先安装node环境 2)node全局安装gulp(npm install -g gulp),如果安装不上可使用淘宝镜像(cnpm install -g gu…

基于nodeJs:通过不同插件能自动完成一系列动作,比如压缩js/css/img.解析模版标签.解析less等: 一.安装gulp 安装nodeJs 打开Node.js command prompt 输入npm install gulp -g全局安装gulp 在C盘根目录创建gulpTest文件夹 在命令行使用cd c:/gulpTest进入该文件夹 在该文件夹内创建文件package.json(后面会提及该文件作用),并输入{"name":"projectName"…

简单配置grunt 配置gulp还是grunt都是在node的环境下安装的,所以在这之前保证你的node环境已经安装好了! -------------------------------------------------------------------------------- * nodejs安装很简单,去百度搜索 nodejs官网下载.    下载这个之后直接双击,点击安装和下一步就好,这里很简单不必多说. *其次就是验证你安装nodejs是否成功的方法:别多想,fn+f5,输入cmd…

关于grunt的一些记录,记的比较乱... 0.删除node_modules文件夹 命令行: npm install rimraf -g //先运行 rimraf node_modules //然后运行 1.安装grunt及插件 安装grunt: npm install grunt --save-dev 安装插件,不需要的可以删除: npm install --save-dev grunt-contrib-cssmin grunt-contrib-uglify grunt-contrib-wat…

该工具适用于超多项目开发,每个项目不用都安装依赖,所有依赖都安装在ffk命令项目中,对于多分支拉到本地进行开发,亦有益处.对于多页面开发,也是相当便利,不用手动撸entry和plugin. git: https://github.com/lin1270/ffk 欢迎star. 1. 安装: npm install ffk -g 2. 下载种子: https://github.com/lin1270/ffk-seed 3. 在种子目录中使用dev(开发)命令: ffk d 即可打开浏览器,实时刷新…

Grunt--Less 摘要: 之前介绍了自动构建工具Grunt,其中有一个模块是"grunt-contrib-less",下面是配置Grunt自动编译less文件. 安装: Grunt是基于node,功能模块化.你可以将grunt-contrib-less配置在package.json中然后npm install就完成安装了,也可以通过下面命令安装 npm install grunt-contrib-less --save-dev 注意: grunt-contrib-less是开发依…

随着前端项目的飞速发展,项目越来越大.文件越来越多,前端工程化的工具也越来越多.下面介绍目前最流行的四种构建工具——grunt.gulp.browserify.webpack 所有的构建工具都是基于NodeJs和Npm,所以使用下面任何工具都需要安装Node 一.grunt 1.需要两个文件: Gruntfile.js —— grunt执行任务文件:描述项目会执行的任务. package.json —— 工程描述文件:描述项目基本信息,和项目中使用到的npm包信息,方便其他人了解项目信息.跑起来…

本文主要介绍前端开发中常用的构建工具Grunt,具体包括Grunt的基本情况.安装.使用和常见插件的安装.配置和使用等内容. 1.1 Grunt简单介绍 Grunt是一套前端自动化构建工具.对于需要反复重复的任务(如压缩.编译.单元测试等),自动化构建工具可以减轻并简化我们的工作.我们只需要在 Gruntfile 文件中正确配置好要处理的任务,任务运行器就会自动帮我们完成大部分工作. Grunt的优点 ❏ Grunt拥有庞大的生态系统,并且一直在增长.❏ Grunt支持我们自己创作插件并发布.…

相关代码已上传至github 怎么是项目构建? 编译项目中的js, sass, less: 合并js/css等资源文件: 压缩js/css/html等资源文件: JS语法的检查. 构建工具的作用? 简化项目构建, 自动化完成构建. 构建工具 grunt.gulp.webpack grunt 1.官网:https://www.gruntjs.net/ 2.参考文档:http://www.cnblogs.com/wangfupeng1988/p/4561993.html 3.常用的插件: * gru…

JS项目构建工具Grunt实践 一:下面来介绍下如何用grunt合并,压缩js文件.    大概步骤有如下:     1. 新建文件夹相对应的项目 比如文件名叫:gruntJs      2. 新建文件package.json.      3. 新建文件Gruntfile.js.      4. 命令行执行grunt任务. 一: 新建文件名为:gruntJs 该根目录下有src文件夹 里面放了n个js文件要构建的,还有个叫dest文件夹(名字都可以自取),这个文件是存储编译后的js文件. 二:…

gulp 和grunt这两个是我知道的自动构建工具,但是说实话都没在项目中用过,不太清楚自动化构建是什么意思, 1.grunt和gulp有什么相同点和不同点? (1).易于使用:采用代码优于配置策略,gulp让简单的事情继续简单,复杂的任务变得可管理: (2).高效:通过利用Node.js强大的流,不需要网磁盘写中间文件,可以更快地完成构建: (3).高质量:gulp严格的插件知道发昂真,确保插件简单并且按照你期望的方式工作: (4).易于学习:通过把API降到最少,你能在很短的时间内学会gul…

前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具grunt,那么 博主就要夸你一句:油啊热瘪死他. 那么grunt和gulp有什么异同点呢? 1.易于使用:采用代码优于配置策略,Gulp让简单的事情继续简单,复杂的任务变得可管理. 2.高效:通过利用Node.js强大的流,不需要往磁盘写中间文件,可以更快地完成构建. 3.高质量:Gulp严格的插件指导…

Gulp.js----比Grunt更易用的前端构建工具 Grunt一直是前端构建工具,然而他也不是毫无缺陷的,gulp的作者 Eric Schoffstall 在他介绍 gulp.js 的 presentation 中总结了 Grunt 的几点不足之处: 插件很难遵守单一职责.因为 Grunt 的 API 设计缺憾,使得许多插件不得不负责一些和其主要任务无关的事情.比如说要对处理后的文件进行更名操作,你可能使用的是 uglify 插件,也有可能使用的是 concat 插件(取决于工作流的最后一个…

1.scons是linux下的自动构建工具 scons是用Python编写的,使用scons之前需确认是否已经安装了Python.(在系统的命令行中运行python -V或python --version). 2.安装过程如下 wget http://prdownloads.sourceforge.net/scons/scons-2.2.0.tar.gz . tar zxvf scons-2.2.0.tar.gz cd scons-2.2.0 python setup.py install 3.…