1:   安装node.js


 (说明:gulp是基于node.js环境下执行,所以要先安装node.js)



  打开node.js的官网,选择所需的版本点击下载即可;




2:   gulp 的简单操作命令:


首先打开命令窗口



( window + r 输入cmd回车   or    在你需要执行的文件夹下按住shift键的同时,单击鼠标右键—>点击:在此处打开命令窗口(W))



  2.1:node -v       --->   查看安装的nodejs版本


2.2:npm -v    --->  查看npm的版本号


2.3:   cd +文件路径    --->定位到文件目录下










2.4:dir   --->列出文件列表


2.5:cls   --->清空命令窗口内容




3:  npm介绍


3.1、说明:npm(node package manager)nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等);

npm install <name> [-g] [--save-dev];<name>:node插件名称。例:npm install gulp-less --save-dev-g:全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm,并且写入系统环境变量;  非全局安装:将会安装在当前定位目录;  全局安装可以通过命令行在任何地方调用它,本地安装将安装在定位目录的node_modules文件夹下,通过require()调用;--save:将保存配置信息至package.json(package.json是node.js的项目配置文件);

-dev:保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点;一般保存在dependencies的像这些express/ejs/body-parser等等。

npm install,则会根据package.json下载所有需要的包,npm install --production只下载dependencies节点的包)。npm uninstall <name> [-g] [--save-dev]

npm uninstall gulp-less gulp-uglify gulp-concat ……???太麻烦

npm install rimraf -g 用法:rimraf node_modules

npm update <name> [-g] [--save-dev]npm update [--save-dev]

npm help

npm list

PS:npm安装插件过程:从http://registry.npmjs.org下载对应的插件包(该网站服务器位于国外,所以经常下载缓慢或出现异常),解决办法往下看。

4:选装cnpm

4.1、说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事。来自官网:“这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”

4.2、官方网址:http://npm.taobao.org

npm install cnpm -g --registry=https://registry.npm.taobao.org;  注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;

注:cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm(以下操作将以cnpm代替npm)。



5:全局安装gulp

安装命令:cnpm install gulp -g  

6:新鲜package.json文件

6.1   说明:package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件;

6.2   命令提示符执行cnpm init   (初始化,执行完命令直接回车即可,依次应输入:项目名称,项目版本,项目描述,项目仓库,关键字,             作者,许可证信息    注释:这里输入的内容可以为空,直接回车跳过即可)


ImageMagick压缩图片命令 压缩img文件_gulp

6.3执行文件夹下就会生成一个package.json文件

package.json是一个普通json文件,不能添加任何注释。

7:本地安装gulp插件


cnpm install --save-dev


ImageMagick压缩图片命令 压缩img文件_gulp_02





8:新建gulpfile.js 文件(必须)



8.1   gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件(其实将gulpfile.js放入其他文件夹下亦可)





8.2 配置文件



PS : 此处引入两个模块 一个为css 文件压缩模块,另一个为img图片压缩模块






ImageMagick压缩图片命令 压缩img文件_文件压缩_03



9:导入模块






ImageMagick压缩图片命令 压缩img文件_ImageMagick压缩图片命令_04





10:执行模块定义的任务


命令提示符:gulp  (+  任务名称)  




ImageMagick压缩图片命令 压缩img文件_gulp 实例_05




最后总结一下:




1:首先打开命令窗口,cd到执行文件夹下面

2:安装  npmjs.org  镜像

3:全局安装gulp

4:初始化    cnpm init,新建package.json文件

5:本地安装gulp插件 

6:新建gulpfiel.js文件      配置文件(导入模块)

7:执行任务


最后如有错误,欢迎指正,谢谢!