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名称不可以更改,执行在命令行输入gulp
gulp.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()))