一.安装全局Gulp
打开cmd命令行工具
1.npm install --global gulp //安装在c盘（即使不安装在C盘安装后也会自动映射至C盘）
2.npm install --save-dev gulp //安装在项目文件下
3.在项目根目录下创建一个名为 gulpfile.js 的文件：
var gulp = require('gulp'); //测试代码
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
4.运行 gulp
在控制台中执行gulp
二.Gulp插件
1.gulp的常用方法
gulp.task(str,fn) //创建一个gulp任务
gulp.src(path) //文件来源
gulp.dest(path) //操作之后的文件到哪里去
.pipe(package) //执行一个gulp功能
gulp.watch() //监听
gulp.start() //执行gulp任务
2.插件(以下插件都是项目依赖)
压缩JavaScript文件
1.安装插件：
npm install --save-dev gulp-uglify //安装在所构建的主文件下
2.压缩CSS文件
npm install --save-dev gulp-minify-css
3.压缩HTML文件
npm install --save-dev gulp-minify-html
4.压缩图片文件
npm install --save-dev gulp-imagemin
5.代码检查
npm install --save-dev gulp-jshint jshint
注意：很多公司是有自己learder修改的编码方式
6.合并、重命名
npm install --save-dev gulp-concat gulp-rename
7.监听
gulp.task("watchLess",function(){
gulp.watch("src/css/*.less",function(){
gulp.run("reless")
})
})
安装完成插件后选择你要构建的文件，创建gulpfile.js：
项目文件树状图
在gulpfile.js文件中引入插件
var gulp = require('gulp');
var jsUglify = require("gulp-uglify");
var cssUglify = require("gulp-minify-css");
var htmlUglify = require("gulp-minify-html");
var imgUglify = require("gulp-imagemin");
var myconcat = require("gulp-concat");
var myrename = require("gulp-rename");
var livereload = require("gulp-livereload"); //热更新（文后提到）
gulp.task("minjs",function(){ // 找到要操作的文件
gulp.src("./js/apps/*.js")
.pipe(jsUglify())
.pipe(gulp.dest("dist/js"))
})
// 压缩css任务
gulp.task("mincss",function(){
gulp.src("./style/*.css")
.pipe(cssUglify())
.pipe(gulp.dest("dist/css"))
})
// 压缩Image
gulp.task("minImg",function(){
gulp.src("./images/*.{png,jpg,gif,ico,jpeg,svg}")
.pipe(imgUglify({
optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）
progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
}))
.pipe(gulp.dest("dist/images"))
})
gulp.task("hot",function(){ //热更新（文后提到）
livereload.listen();
gulp.watch("index.html",function(event){
livereload.changed(event.path);
})
})
// 合并，压缩，重命名
gulp.task("final",function(){
gulp.src("./js/apps/*.js")
.pipe(myconcat("main.js")) // mian.min.js
.pipe(jsUglify())
.pipe(myrename({
suffix:".min"
}))
.pipe(gulp.dest("dist/js"))
})
// 每一个功能被称为一个任务
gulp.task('default', function() {
gulp.start(["minjs","mincss","minImg"])
});
在cmd中输入gulp 运行成功会自动生成dist文件，包含压缩合并后的你在路径中选择的js,css,img文件：
三.热更新
1.命令：npm install gulp-livereload --save-dev
2.全局服务器：npm install -g http-server
3.浏览器打开：chrome://extensions/ 浏览器插件：LiveReload （直接点击启动）
4.编写热更新的代码
gulp.task("hot",function(){
livereload.listen();
gulp.watch("src/index.html",function(event){
livereload.changed(event.path);
})
})
5.启动热更新
1.在项目根目录下启动http-server
2.启动热更新：hot
3.打开浏览器启动项目 localhost：8080
4.启动浏览器（livereload）插件，将空心圆点成实心圆
网友评论