gulp使用

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
gulp是基于Nodejs的自动任务运行器，她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。

gulp是基于nodejs的，所以也要把nodejs安装并配置好环境变量，之前也一直写要首先配置好node，没有具体步骤，今天完善一下。

1.打开nodejs官网（https://nodejs.org/en/），点击硕大的绿色Download按钮，它会根据系统信息选择对应版本（.msi文件）。

2.安装完成之后注意将其配置到环境变量（系统变量path中），这样你就可以在全局范围内去使用它了。我的路径是在D:\Program Files\nodejs\node_modules\npm\bin

3.按window + r 输入cmd回车，然后输入node -v， 然后输入npm -v  ， 如果都能打印出相应版本信息，那么说明你配置成功了

4.（无关紧要）选装cnpm，这是淘宝的镜像，如果网速一直比较好的话这个下不下都可以npm install cnpm -g --registry=https://registry.npm.taobao.org也需要配置环境变量

node就下载完成了。接下来就是安装gulp。

gulp安装：

（一）cmd全局安装gulp，npm install gulp -g，然后耐心等待，完成后输入gulp -v就可以检测版本号（也需要配置环境变量）

（二）在自己的经常练习用的d盘或者其他盘新建一个文件夹（gulp）名字随意了，然后通过cmd切盘进自己的项目下，npm init  创建package.json文件说明

 根据提示填入自己的信息，完成后打开这个文件内容如下：

{  "name": "gulptest",//项目名称（必须）  "version": "0.0.1",//项目版本（必须）  "description": "这是一个gulp的测试程序",//项目描述（必须）"homepage": "",   //项目主页  "main": "index.js",//入口文件  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "keywords": [//关键词    "gulp"  ],  "author": "wuxunxun007",//作者  "license": "ISC"//项目许可协议"devDependencies": {    //项目依赖的插件    "gulp": "^3.8.11",    "gulp-less": "^3.0.0"  }}

查看package.json帮助文档 npm help package.json

（三）好吧，个人认为第二步无关紧要。本地安装gulp插件，cmd进你的目录下，执行npm install gulp --save-dev，这一步完成之后，gulp算是安装完成了。

接下来就是需要安装gulp的一些插件了，需要什么装什么。

gulp一些插件：

1.编译less文件（npm install gulp-less --save-dev）

然后新建一个gulpfile.js文件

var gulp = require("gulp");var less = require("gulp-less");gulp.task("lessTocss",function(){gulp.src("这里是相对路径，less文件的位置") .pipe(less()).pipe(gulp.dest("想要生成css的文件位置"))});

然后输入gulp lessTocss 然后就可以了

2.复制文件

var gulp = require("gulp");gulp.task("copy-html",function(){//task表示的是一个任务gulp.src(["*.html","!info.html"])//找到需要操作的文件，路径相对本js文件.pipe(gulp.dest("dist"));//pipe()每一个步骤的连接器//gulp.dest("dist")  将文件放于dist文件夹下，如果没有此文件夹，那么就自动创建一个该文夹});//复制图片gulp.task("copy-img",function(){//gulp.src(["img/*.jpg","img/*.png","img/*.gif"])// gulp.src("img/*{.jpg,.png,.gif}")gulp.src("img/**/*").pipe(gulp.dest("dist/img"));});

如果我们想同时执行这两个步骤怎么办呢，gulp还是很强大的，只需要

//默认执行的任务,default名称不可以更改，执行在命令行输入gulpgulp.task("default",["copy-html","copy-img"],function(){console.log("ok");});

3.合并、压缩、重命名文件(npm install gulp-uglify --save-dev)(npm install gulp-rename --save-dev)

var gulp = require("gulp");var less = require("gulp-less");// var sass = require("gulp-sass");var rename = require("gulp-rename");var concat = require("gulp-concat");var minify = require("gulp-minify-css"); // gulp-uglify 压缩JS使用的var uglify = require("gulp-uglify");gulp.task("less",function(){gulp.src("css/*.less").pipe(concat("all.less"))//将css下面的所有的less文件合并为all.less.pipe(less())//编译为css文件.pipe(rename("all.css"))//改名为all.less.pipe(gulp.dest("dist/css")) //放在这个路径下.pipe(minify())//压缩.pipe(rename("all.min.css")) //重命名为这个.pipe(gulp.dest("dist/css"));  //放在这个文件下});

4.实时监测文件的更新

var gulp = require("gulp");gulp.task("watch",function(){gulp.watch("index.html",["copy-html"]);gulp.watch("img/**/*",["copy-img"]);});

5.创建一个服务（npm install gulp-connect --save-dev）
var gulp = require("gulp");//服务模块var connect = require("gulp-connect"); gulp.task("server",function(){connect.server({root:"根目录",livereload:true});});

压缩图片npm install gulp-imagemin --save-dev，压缩css  npm install gulp-minify-css --save-dev 这个require之后调用这个方法就可以（pipe(minImg())）
                                             
        3        0           
	
				
	
					   
Gulp 使用
	  	   
gulp使用
	  	   
gulp使用
	  	   
gulp使用
	  	   
gulp使用
	  	   
使用Gulp
	  	   
gulp使用
	  	   
gulp使用
	  	   
gulp-gulp使用小结(一)
	  	   
hello gulp，使用gulp的第一天。
	  	   
gulp插件gulp-repath使用教程
	  	   
【gulp】gulp安装及使用初探
	  	   
gulp 使用实例解析
	  	   
gulp的使用
	  	   
Gulp安装及使用
	  	   
gulp的学习使用
	  	   
gulp使用简要说明
	  	   
gulp使用笔记
	     		  
	  	   
获取当前时间
	  	   
Windows 安装 Redis
	  	   
Linux编程之给你的程序开后门
	  	   
HDFS的架构
	  	   
【CentOS7】CentOS 7 安装 MySQL
	  	   
gulp使用
	  	   
runat="server"的根本意义是什么？
	  	   
swift结构体常量的存储属性
	  	   
intellij idea git fetch failed fatal:Authentication failed for
	  	   
struts2的核心机制学习
	  	   
GYM 100827 F.Knights（dp+矩阵快速幂）
	  	   
POJ 2677 Tour 双线DP
	  	   
iOS  TableView的组件化
	  	   
jar hell问题以及解决方案