grunt构建前端自动化】的更多相关文章

废话不多说.直奔主题. 1.安装node. 别问为什么.如果你不知道,说了你还是不知道. 别问怎么安装,自己去百度. 2.安装grunt_CLI. 安装完node,并且安装成功了,后.下载grunt_Cli. 看到如上界面,说明安装成功了. 查看grunt版本. 3.在F盘新建grunt目录 目录里面新建如下文件,和文件夹. npm init 命令行新建package.json 内容如下: 4.安装grunt. 安装完成后看一下package.json的devDependencies多了一条配置…
一.grunt是基于nodejs的,所以首先我们需要安装node 二.全局安装grunt 可以参考 http://www.gruntjs.net/docs/getting-started/ 进行安装. 1.全局安装 npm install -g grunt-cli 2.进入当前项目根据配置文件 package.json 进行本地安装,或者直接把以前项目所有用过的本地安装文件直接复制到当前项目使用 3.任务设置 打开gruntfile.js进行设置 module.exports = functio…
在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及使用方法(Tasks and dependencies) 3. 扩展优化(Extend & Optimize Task) 4. 其他插件介绍(Other plug-ins) 5. 匹配规则(Match Files) 6. 注意事项(Attention) 关于Gulp的入门介绍及安装方法,可先去 <…
1. grunt构建工具是基于nodejs上的,所以在使用之前一定要先安装好nodejs 2. 安装好nodejs后,node -v查看node版本 npm-v 查看npm版本信息 3. 在需要用到的项目文件下安装grunt,安装命令 :npm install grunt ,安装之后无法执行grunt命令,需安装一个全局的grunt-cli ( grunt命令操作 ) 安装命令:npm install -g grunt-cli,再使用 grunt --version 查看grunt-cli版本…
grunt是什么? grunt是一个前端构建工具, 每种应用开发, 都有一套构建工具, 例如linux c程序开发, 构建工具是make, java程序的构建工具为maven,web前端经过十多年的发展也形成了自己的构建工具, 此包括grunt, 其他还有GALP, 相比grunt较成熟, galp目前风头较劲 http://www.benben.cc/blog/?p=407. grunt基础认识 参见, 基本上按照下文运行一遍, 就理解grunt架构了. [前端福利]用grunt搭建自动化的w…
前言 在刚入门前端的时候,我们并不清楚前端有工具可以帮我们自动化打包压缩文件,当时只关注能实现功能就可以了,也不太在意前端性能优化的问题,随着项目功能的复杂,项目也变得越来越大,页面的执行速度也开始变慢,因此我们认识到了前端优化的重要性,但是之前的压缩打包都是需要我们自己手动执行或者去直接转化的网站进行转化,这无疑增加了我们的工作量,作为程序员,我觉得更重要的是让程序去执行我们想执行的东西,于是我便google了起来,查到了grunt和gulp,两者都是自动化打包,但是grunt的一大堆繁杂的配…
类似于Grunt,gulp是另一个同样功能很强大的前端项目自动化利器. 下面是项目的效果:…
前端优化是尽量减少http请求,所以我们需要尽量合并压缩文件,然后调用压缩后的文件,比如多个css文件压缩成一个,多个js文件合并压缩等,usemin能够自动在html中使用压缩后的文件,达到上面的目的. 上图是完整打包后的文件目录,原始目录是assets,打包发布的文件是dist. gruntfile.js文件内容: module.exports = function(grunt) { grunt.config.init({ clean:{ src:"dist/" }, usemin…
HTML去掉注析.换行符 - HtmlMin CSS文件压缩合并 – CssMinify JS代码风格检查 – JsHint JS代码压缩 – Uglyfy image压缩 - imagemin http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201307/216460.shtml…
一.Node环境 1.什么是Node? Node.js类似于jquery.js,不是js文件,也不是一个js框架,而是Server side JavaScript runTime,服务端的一个JS运行时:Node中只能运行ECMScript,无法使用BOM和DOM:目前我们的JS是运行在浏览器内核中的:说到底就是一个JS运行环境. 2.Node的历史 Node.js 0.12.7版本,也就是官方版本,但是另一个分支是IO.js,他是社区的产物,不是官方的东西,io.js有很多新特性,迭代速度非常…