Gulp与Less的理解认识
Gulp与Less
一、Gulp的概念
- 自动化构建工具，可以通过gulp对我们的代码进行全自动的编译。可以实现代码的自动压缩、编译、实时监测等功能
二、特点
- 任务化
- 基于流(数据流io:input/output)操作
整个操作都是基于数据流进行操作
具备属于gulp的内存，所有的操作全部在gulp的内存当中
对应着输入流和输出流会，将数据通过src方法输入，通过dest方法输出 - 简易的API
三、安装
npm init初始化项目package.jsonnpm install gulp-cli -g全局安装gulp-clinpm install gulp@3 --save-dev局部安装gulp- 在项目目录下开启cmd，输入gulp，出现下面的提示则表示安装成功
[22:40:15] No gulpfile found - 注意：全局安装也可以使用
npm install --global gulp，但是却不能够随意的在项目目录切换gulp版本，不够灵活，所以选择使用gulp-cli，脚手架安装 gulp -v可以查看gulp的版本
四、使用
- 注册事件
实例代码：
// 注册
gulp.task('事件名',function(){
})
- 执行默认事件
实例代码：
// 默认事件
gulp.task('default',['参数'])
五、gulp的具体应用
- js文件的处理
注意：需要提前通过npm install gulp-concat gulp-uglify gulp-rename --save-dev命令安装插件
实例代码：
var gulp = require("gulp");
// 引入插件
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
// 注册 任务
// 操作js
// 注册一个js事件，在回调函数中return返回数据
// 第一个参数为事件的名称，js
gulp.task("js",function(){
// 注册事件完成之后将内容输出到内存当中
return gulp.src("js/*.js") // 将文件读取到内存当中
// pipe 是管道
.pipe(concat("bundle.js")) // 合并代码
.pipe(gulp.dest("dist/js/")) // 将文件输出到指定目录
.pipe(uglify()) // 将代码进行压缩
.pipe(rename({suffix:".min"})) // 设置文件添加后缀
.pipe(gulp.dest("dist/js/"))
});
// 默认事件，设置默认任务
gulp.task("default",[]);
运行成功之后： gulp js命令进行执行任务
- less文件的处理
注意：需要提前通过npm install gulp-less gulp-clean-css --save-dev命令安装插件
实例代码：
// 引入插件
var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
// 注册任务事件 js
gulp.task("js",function(){
// 注册事件完成以后将内容输出到内存当中
return gulp.src("js/*.js")
.pipe(concat("bundle.js"))
.pipe(gulp.dest("dist/js/"))
.pipe(uglify())
.pipe(rename({suffix:".min"}))
.pipe(gulp.dest("dist/js/"))
});
// 注册任务 less
gulp.task("less",function(){
// 注册事件完成以后将内容输出到内存当中
return gulp.src("less/*.less")
// less编译
.pipe(less())
// 将less编译之后的文件输出到csss目录，和其它的css文件在一起编译压缩合并
.pipe(gulp.dest("css/"))
});
// 默认事件，设置默认任务
gulp.task("default",[]);
运行成功之后， gulp less 命令执行
- css文件的处理
实例代码：
// 引入插件
var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
// 注册任务事件 js
gulp.task("js",function(){
// 注册事件完成以后将内容输出到内存当中
return gulp.src("js/*.js")
.pipe(concat("bundle.js"))
.pipe(gulp.dest("dist/js/"))
.pipe(uglify())
.pipe(rename({suffix:".min"}))
.pipe(gulp.dest("dist/js/"))
});
// 注册任务 less
gulp.task("less",function(){
// 注册事件完成以后将内容输出到内存当中
return gulp.src("less/*.less")
// less编译
.pipe(less())
// 将less编译之后的文件输出到csss目录，和其它的css文件在一起编译压缩合并
.pipe(gulp.dest("css/"))
});
// 默认事件，设置默认任务
gulp.task("default",[]);// 引入插件
var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
// 注册任务事件 js
gulp.task("js",function(){
// 注册事件完成以后将内容输出到内存当中
return gulp.src("js/*.js")
.pipe(concat("bundle.js"))
.pipe(gulp.dest("dist/js/"))
.pipe(uglify())
.pipe(rename({suffix:".min"}))
.pipe(gulp.dest("dist/js/"))
});
// 注册任务 less
gulp.task("less",function(){
// 注册事件完成以后将内容输出到内存当中
return gulp.src("less/*.less")
// less编译
.pipe(less())
// 将less编译之后的文件输出到csss目录，和其它的css文件在一起编译压缩合并
.pipe(gulp.dest("css/"))
});
// 注册任务 css
/* gulp.task("css",function(){
// 注册事件完成以后将内容输出到内存当中,写入
return gulp.src("css/*.css")
// 合并代码
.pipe(concat("build.css"))
// 尽可能的考虑ie8
.pipe(cleanCss({compatibility:"ie8"}))
// 重命名
.pipe(rename({suffix:".min"}))
// 输出
.pipe(gulp.dest("dist/css/"))
}) */
// 如果在css任务中添加第二个参数，那么相当于添加了一个依赖
gulp.task("css",["less"],function(){
// 注册事件完成以后将内容输出到内存当中，写入
return gulp.src("css/*.css")
// 合并代码
.pipe(concat("build.css"))
// 尽可能考虑ie8
// 通过cleanCss方法进行代码压缩，并且传入参数compatibility，能够让代码的压缩适应ie8
.pipe(cleanCss({compatibility:"ie8"}))
// 重命名
.pipe(rename({suffix:".min"}))
// 输出
.pipe(gulp.dest("dist/css/"))
})
// 默认事件，设置默认任务
gulp.task("default",[]);
运行成功之后，gulp css 命令执行
- img 文件的处理
注意：需要提前通过npm install gulp-imagemin --save -dev命令安装插件
实例代码：
// 引入插件
var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
// 注册任务事件 js
gulp.task("js",function(){
// 注册事件完成以后将内容输出到内存当中
return gulp.src("js/*.js")
.pipe(concat("bundle.js"))
.pipe(gulp.dest("dist/js/"))
.pipe(uglify())
.pipe(rename({suffix:".min"}))
.pipe(gulp.dest("dist/js/"))
});
// 注册任务 less
gulp.task("less",function(){
// 注册事件完成以后将内容输出到内存当中
return gulp.src("less/*.less")
// less编译
.pipe(less())
// 将less编译之后的文件输出到csss目录，和其它的css文件在一起编译压缩合并
.pipe(gulp.dest("css/"))
});
// 默认事件，设置默认任务
gulp.task("default",[]);// 引入插件
var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
// 注册任务事件 js
gulp.task("js",function(){
// 注册事件完成以后将内容输出到内存当中
return gulp.src("js/*.js")
.pipe(concat("bundle.js"))
.pipe(gulp.dest("dist/js/"))
.pipe(uglify())
.pipe(rename({suffix:".min"}))
.pipe(gulp.dest("dist/js/"))
});
// 注册任务 less
gulp.task("less",function(){
// 注册事件完成以后将内容输出到内存当中
return gulp.src("less/*.less")
// less编译
.pipe(less())
// 将less编译之后的文件输出到csss目录，和其它的css文件在一起编译压缩合并
.pipe(gulp.dest("css/"))
});
// 注册任务 css
/* gulp.task("css",function(){
// 注册事件完成以后将内容输出到内存当中,写入
return gulp.src("css/*.css")
// 合并代码
.pipe(concat("build.css"))
// 尽可能的考虑ie8
.pipe(cleanCss({compatibility:"ie8"}))
// 重命名
.pipe(rename({suffix:".min"}))
// 输出
.pipe(gulp.dest("dist/css/"))
}) */
// 如果在css任务中添加第二个参数，那么相当于添加了一个依赖
gulp.task("css",["less"],function(){
// 注册事件完成以后将内容输出到内存当中，写入
return gulp.src("css/*.css")
// 合并代码
.pipe(concat("build.css"))
// 尽可能考虑ie8
// 通过cleanCss方法进行代码压缩，并且传入参数compatibility，能够让代码的压缩适应ie8
.pipe(cleanCss({compatibility:"ie8"}))
// 重命名
.pipe(rename({suffix:".min"}))
// 输出
.pipe(gulp.dest("dist/css/"))
})
// 注册任务 img
gulp.task("images",function(){
// 注册事件完成以后将内容输出到内存当中，写入
return gulp.src("img/*")
.pipe(imagemin())
.pipe(gulp.dest("dist/img/"))
})
// 默认事件，设置默认任务
gulp.task("default",[]);
- 异步与同步任务的执行
1） 异步任务的执行：
异步任务的执行，我们只需要将我们注册的事件传入默认事件的第二个参数数组当中即可
// 默认事件
gulp.task("default", ['js','less','css']);
less转换成css文件后才能执行css的解析，也就是说css的编译是依赖less的，为了处理这个问题，可以在css事件中传入第二个参数，在执行css之前就会先去等待less的编译完成
实例代码：
gulp.task("css",["less"],function(){
// 注册事件完成以后将内容输出到内存当中，写入
return gulp.src("css/*.css")
// 合并代码
.pipe(concat("build.css"))
// 尽可能考虑ie8
// 通过cleanCss方法进行代码压缩，并且传入参数compatibility，能够让代码的压缩适应ie8
.pipe(cleanCss({compatibility:"ie8"}))
// 重命名
.pipe(rename({suffix:".min"}))
// 输出
.pipe(gulp.dest("dist/css/"))
})
// 异步事件 注册事件传入默认事件的第二个参数数组中
// 开始顺序 js > less > css 完成顺序 less > js > css
gulp.task("default",["js","less","css"]);
运行成功之后， gulp 命令执行
2）同步任务的执行：
将每个事件中的return去掉即可
实例代码：
// 同步事件 去掉注册事件中的return
// 速度快，但是太耦合了，一个不能执行，其它的都不能执行
gulp.task("default",["js","less","css"]);
运行成功之后，gulp 命令执行
- 半自动编译
注意：需要提前通过npm install gulp-livereload --save-dev命令安装插件
实例代码：
// 引入插件
var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
// var imagemin = require("gulp-imagemin");
var livereload = require("gulp-livereload");
// 注册任务事件 js
gulp.task("js",function(){
// 注册事件完成以后将内容输出到内存当中
return gulp.src("js/*.js")
.pipe(concat("bundle.js"))
.pipe(gulp.dest("dist/js/"))
.pipe(uglify())
.pipe(rename({suffix:".min"}))
.pipe(gulp.dest("dist/js/"))
});
// 注册任务 less
gulp.task("less",function(){
// 注册事件完成以后将内容输出到内存当中
return gulp.src("less/*.less")
// less编译
.pipe(less())
// 将less编译之后的文件输出到csss目录，和其它的css文件在一起编译压缩合并
.pipe(gulp.dest("css/"))
});
// 注册任务 css
/* gulp.task("css",function(){
// 注册事件完成以后将内容输出到内存当中,写入
return gulp.src("css/*.css")
// 合并代码
.pipe(concat("build.css"))
// 尽可能的考虑ie8
.pipe(cleanCss({compatibility:"ie8"}))
// 重命名
.pipe(rename({suffix:".min"}))
// 输出
.pipe(gulp.dest("dist/css/"))
}) */
// 如果在css任务中添加第二个参数，那么相当于添加了一个依赖
gulp.task("css",["less"],function(){
// 注册事件完成以后将内容输出到内存当中，写入
return gulp.src("css/*.css")
// 合并代码
.pipe(concat("build.css"))
// 尽可能考虑ie8
// 通过cleanCss方法进行代码压缩，并且传入参数compatibility，能够让代码的压缩适应ie8
.pipe(cleanCss({compatibility:"ie8"}))
// 重命名
.pipe(rename({suffix:".min"}))
// 输出
.pipe(gulp.dest("dist/css/"))
})
// 注册任务 img
gulp.task("images",function(){
// 注册事件完成以后将内容输出到内存当中，写入
return gulp.src("img/*")
.pipe(imagemin())
.pipe(gulp.dest("dist/img/"))
})
// 半自动监听
gulp.task("watch",["default"],function(){
// 开启监听
livereload.listen();
// 确认监听的目标和执行的任务
gulp.watch("js/*.js",["js"]);
gulp.watch(["css/*.css","less/*.less"],["css"])
})
// 设置默认任务
gulp.task("default",[]);
运行，通过 gulp watch 命令执行
- 全自动编译与自动打开
注意：需要提前通过npm install gulp-connect --save-dev命令安装插件
需要提前通过npm install open --save-dev命令安装插件
实例代码：
// 引入插件
var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
// var imagemin = require("gulp-imagemin");
var livereload = require("gulp-livereload");
var connect = require("gulp-connect");
var open = require("open");
// 注册任务事件 js
gulp.task("js",function(){
// 注册事件完成以后将内容输出到内存当中
return gulp.src("js/*.js")
.pipe(concat("bundle.js"))
.pipe(gulp.dest("dist/js/"))
.pipe(uglify())
.pipe(rename({suffix:".min"}))
.pipe(gulp.dest("dist/js/"))
// 开启实时监听
.pipe(livereload())
.pipe(connect.reload())
});
// 注册任务 less
gulp.task("less",function(){
// 注册事件完成以后将内容输出到内存当中
return gulp.src("less/*.less")
// less编译
.pipe(less())
// 将less编译之后的文件输出到csss目录，和其它的css文件在一起编译压缩合并
.pipe(gulp.dest("css/"))
// 开启实时监听
.pipe(livereload())
.pipe(connect.reload())
});
// 注册任务 css
/* gulp.task("css",function(){
// 注册事件完成以后将内容输出到内存当中,写入
return gulp.src("css/*.css")
// 合并代码
.pipe(concat("build.css"))
// 尽可能的考虑ie8
.pipe(cleanCss({compatibility:"ie8"}))
// 重命名
.pipe(rename({suffix:".min"}))
// 输出
.pipe(gulp.dest("dist/css/"))
}) */
// 如果在css任务中添加第二个参数，那么相当于添加了一个依赖
gulp.task("css",["less"],function(){
// 注册事件完成以后将内容输出到内存当中，写入
return gulp.src("css/*.css")
// 合并代码
.pipe(concat("build.css"))
// 尽可能考虑ie8
// 通过cleanCss方法进行代码压缩，并且传入参数compatibility，能够让代码的压缩适应ie8
.pipe(cleanCss({compatibility:"ie8"}))
// 重命名
.pipe(rename({suffix:".min"}))
// 输出
.pipe(gulp.dest("dist/css/"))‘
// 开启实时监听
.pipe(livereload())
.pipe(connect.reload())
})
// 注册任务 img
gulp.task("images",function(){
// 注册事件完成以后将内容输出到内存当中，写入
return gulp.src("img/*")
.pipe(imagemin())
.pipe(gulp.dest("dist/img/"))
// 开启实时监听
.pipe(livereload())
.pipe(connect.reload())
})
// 半自动监听
gulp.task("watch",["default"],function(){
// 开启监听
livereload.listen();
// 确认监听的目标和执行的任务
gulp.watch("js/*.js",["js"]);
gulp.watch(["css/*.css","less/*.less"],["css"])
})
// 全自动监听，相当于是微型的服务器
gulp.task("server",["default"],function(){
connect.server({
// 服务器的根目录地址
root:"dist/",
// 是否开启实时监听
livereload:true,
// 服务器端口
port:6672
})
gulp.watch("js/*.js",["js"]);
gulp.watch(["css/*.css","less/*.less"],["css"])
open("http://localhost:6672/")
})
// 设置默认任务
gulp.task("default",[]);
运行，通过 gulp server 命令进行执行
- 总结
1）less和sass的命令 搭建sass环境
npm rebuild node-sass
npm install gulp-sass --save-dev
2）命令汇总
npm init
npm install gulp-cli -g
npm install gulp@3 --save-dev
npm install gulp-livereload gulp-connect gulp-sass --save-dev
npm rebuild node-sass
npm install gulp-sass --save-dev
gulp sass
gulp server
3）下载
var gulp = require("gulp");``
var livereload = require("gulp-livereload");
var connect = require("gulp-connect");
var sass = require("gulp-sass");
gulp.task('sass', function() {
return gulp.src('sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('dist/'))
.pipe(livereload())
.pipe(connect.reload())
})
gulp.task('watch', ['default'], function() {
livereload.listen();
gulp.watch('sass/*.scss', ['sass']);
})
gulp.task("server",["default"],function(){
connect.server({
// 服务器的根目录地址
root:"dist/",
// 是否开启实时监听
livereload:true,
// 服务器端口
port:6672
})
gulp.watch("js/*.js",["js"]);
gulp.watch(["css/*.css","less/*.less"],["css"]);
gulp.watch('sass/*.scss', ['sass']);
// open("http://localhost:6672/")
})
gulp.task("default",["sass"]);