一.Grunt.js简介(实现自动化) 1)简要说明: 1.GruntJs是基于node的javascript命令行工具,可以自动化构建.测试.生成文档的项目管理工具: 2.使用GruntJs可以自动化的管理子任务的运行: 3.很多开源JS项目都是使用它搭建.如jQuery.Qunit.CanJS等 2)使用原因: 1.合并js文件——为了明确模块分工,可能会将Javascript代码拆成很小很小的一个个js文件,为减少Http Request我们需要合并js文件 2.压缩js文件.css文件等…

一.模块化历史 1,nodejs出现:主要解决后端js规范 2,commonjs:这个组织出来一些服务器规范 3,后端规范commonjs应用升级到前端commonjs2:cmd规范(seajs)和完全抛开commonjs的amd规范(requirejs) 二.gruntjs安装流程 node安装好之后,就告别他了,这里不再说了 npm install -g grunt -cli npm install grunt --save-dev grunt -version npm install -g…

前言: 1.sass编译为css文件,早先时刻写css,后来看了sass挺不错的,于是在新的项目中开始使用上了sass.(grunt需要ruby环境,所以需要先安装ruby,sass环境) ①安装ruby/安装sass ②编译sass文件(eg:style) sass style.scss style.css ③监控文件/文件夹的变化来自动编译sass文件 sass --watch style.scss:style.css #file sass --watch cssFilePath      …

需要了解的知识: 1.nodejs的安装与命令行使用 2.nodejs安装应用 3.grunt的初步了解 本文已假定读者已经熟悉以上知识. 好,我们继续: 任务1:将src目录下的所有zepto及插件合并,并压缩. --src/ ajax.js assets.js callbacks.js data.js deferred.js detect.js event.js form.js fx.js fx_methods.js gesture.js ie.js ios3.js selector.js…

前段时间因为项目中的报表写了一个Jquery插件,开源到github上,参考以往大神们写的插件的姿势,决定搞了像模像样一点.言归正传.前端工程师对这些工具:Node,bower,grunt,npm这些工具应该都很熟悉.今天就简单介绍一下grunt的用法. grunt的介绍及安装请看着:getting-started,中文文档,写的也比较详细. 一个完整grunt项目小包含以下模块或配置文件 npm:node的包管理器,管理(安装)相关插件 grunt-cli:执行grunt任务的工具,但是注意安…

js,css 文件合并与压缩 Grunt 是前端自动化构建工具,类似webpack. 它究竟有多强悍,请看它的 介绍. 这里只演示如何用它的皮毛功能:文件合并与压缩. 首先说下js,css 合并与压缩的好处: 减少 HTTP 请求次数: 节省带宽流量: js 压缩把代码混淆后可看性降低,带来一定安全性: 1. 安装Grunt Grunt 是运行在 Node.js 平台上,先要 安装 Node.js, 然后 安装 Grunt npm install -g grunt-cli 2. 使用Grunt…

具体node及文件配置请看: grunt 安装使用(一) 要压缩的文件 --src/ ajax.js assets.js touch.js zepto.js 目录结构: dist/ node_modules/ src/ Gruntfile.js package.json package.json是依赖库文件 Gruntfile.js是执行步骤程序 一.js合并压缩 第一次需要先安装grunt.执行 npm install -g grunt-cli 进行安装.如果已经安装,可以忽略. 1.pack…

module.exports = function(grunt){ //1.引入 grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-htmlmin'); //2.设置任务: grunt.initConfig({ // //压缩CSS cssmin:{ yasuo:{ options:{ mangle:false }, expand: true, cwd: 'css',//压缩那个文件夹里的文…

类似于grunt,都是基于Node.js的前端构建工具.不过gulp压缩效率更高. 工具/原料 nodejs/npm 方法/步骤 首先要确保pc上装有node,然后在global环境和项目文件中都install gulp npm install gulp -g   (global环境) npm install gulp --save-dev (项目环境)     在项目中install需要的gulp插件,一般只压缩的话需要 npm install gulp-minify-css gulp-con…

npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/tools/grunt-tutorial-start-grunt.html http://www.w3cplus.com/tools/grunt-tutorial-installing-grunt.htmlpackage配置文件 http://blog.csdn.net/woxueliuyun/arti…