Grunt入门学习(1) - 环境安装 这周根据项目需要,在项目的基础上分模块开发了一个小的项目板块,但是在规范组织每个模块的代码和其依赖性时比较麻烦,需要一个项目板块的构建工具.各个模块都包括其对应的html页面模板.css样式表.Javascript文件,以及相关的依赖文件,图片等. 具体的目录结构如下图所示: 往往在代码上传和项目发布之前需要将模块内各个文件比如JavaScript文件.CSS样式表,图片等进行压缩合并,目的主要在于减少加载文件的大小,加快文件加载速度,同时也能在一定程度上…

经过前面的学习,将测试的Gruntfile整合在一起! /** * Created by Administrator on 2017/6/22. */ module.exports = function(grunt){ "use strict"; grunt.initConfig({ pkg: grunt.file.readJSON("package.json"), //将存储在package.json文件中的grunt 版本信息和各个插件的数据信息引入到grunt…

关于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…

目前正在编写公司的部分组件,可能一个组件会包含很多js和css,为了项目上使用方便,应该压缩成一个js库,以供开发者使用,同时也可以减少很多http请求,提高页面访问速度.基于此,学习了grunt自动化构建工具.学习文章:http://developer.51cto.com/art/201506/479127.htm.不过我根据自己的实际情况,有些东西做了一些改动,同时记录下来,后面也会用到.下面单刀直入,直接讲怎么用: 1.安装nodejs.安装过程略.下载路径:https://nodejs.…

前端工作流,Grunt上手指南 Posted@2013-04-20 7:15 a.m. CategoriesGrunt ,  javascript 我想先花点时间回忆一下作为一个前端需要做的工作(Loading...) JS合并 JS压缩 CSS压缩 CSS Sprite 图片优化 测试 静态资源缓存(版本更新) ... 对应的,一个全副武装的前端可能会是这样的: JSHint CSSLint Jade CoffeeScript RequireJS/SeaJS Compass/Stylus/Le…

认识Grunt Grunt中文文档 安装Node环境 CNode 配置Grunt Grunt中文文档-配置任务 什么是package.json package.json中文文档 关于Grunt资料 应用Grunt自动化地优化你的项目前端 Grunt打造前端自动化工作流 Grunt 自动化部署之css.image.javascript.html压缩Gruntfile.js配置 [grunt第一弹]30分钟学会使用grunt打包前端代码 [grunt第二弹]30分钟学会使用grunt打包前端代码(0…

1. 干啥的呢? 项目打包管理,用处有 1)可用于压缩合并前端文件,包括css/js , 2)可用于管理发布文件与开发文件,3)可用于自动编译less 文件 2. 常用的东西有哪些呢? 常用的插件有 1) concat 合并  2)  uglify  压缩  3) requirejs  与requirejs 合并使用 3. 怎么运用到项目中去呢? 1) 在前端文件包根目录编写grunt.js  以及 package.json  , 定义依赖包及部署机制 4. 参考资料…

Gruntfile由以下几部分构成: "wrapper" 函数 项目与任务,目标配置 加载grunt插件和任务 自定义任务 1.wrapper函数(包装函数) 每一个 Gruntfile (和grunt插件)都遵循同样的格式,编写的Grunt代码都必须放在此包装函数内:相当于是gruntfile的入口: module.exports = function(grunt) { // Do grunt-related things in here }; 2.项目和任务,目标配置 大部分的Gr…

grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学,有误请包涵 准备阶段 1.nodeJs环境 因为grunt是基于nodeJs的,所以首先各位需要安装nodeJS环境,这块我们便不管了http://www.cnblogs.com/yexiaochai/p/3527418.html 2.安装grunt 有了nodeJs环境后,我们便可以开始搞grun…

前言 上一篇博客,我们简单的介绍了grunt的使用,一些基础点没能覆盖,我们今天有必要看看一些基础知识 [grunt第一弹]30分钟学会使用grunt打包前端代码 配置任务/grunt.initConfig 前面我们简单的介绍了grunt相关的知识,这里我们这里还需要再熟悉下Gruntfile相关的知识点,比如说配置任务 grunt的任务配置都是在Gruntfile中的grunt.initConfig方法中指定的,这个配置主要都是一些命名性属性比如我们上次用到的合并以及压缩的任务配置: grun…