创建一个文件夹并进入，使用Git bash进入这个文件夹下，执行npm init来生成package.json文件，创建工程目录如下：
image.png
在工程根目录下创建gulpfile.js文件，文件名称必须这么写。文件中的配置如下[根据需要自行配置]
var gulp = require("gulp"),
$ = require("gulp-load-plugins")(), //在方法后面加上括号，表示立即调用
open = require("gulp-open"),
spritesmith = require("gulp.spritesmith"), //制作雪碧图
pngquant = require("imagemin-pngquant");
var app = {
srcPath:"src/", // 源代码路径
devPath:"build/", //整合后的路径，开发路径
prdPath:"dist/" //生产环境路径
}
//html任务
gulp.task("html",()=>{
let option = {
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: false,//省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
};
gulp.src(app.srcPath+"**/*.html")
.pipe(gulp.dest(app.devPath))
.pipe($.htmlmin(option))
.pipe(gulp.dest(app.prdPath))
})
//JSON任务
gulp.task("json",()=>{
gulp.src(app.srcPath+"data/*.json")
.pipe(gulp.dest(app.devPath+"data"))
.pipe(gulp.dest(app.prdPath+"data"))
})
//css任务
gulp.task("css",()=>{
gulp.src(app.srcPath+"style/index.less")
.pipe($.less()) //编译less
.pipe(gulp.dest(app.devPath+"/css/"))
.pipe($.cssmin()) //压缩css
.pipe(gulp.dest(app.prdPath+"/css/"))
})
//js任务
gulp.task("js",()=>{
gulp.src(app.srcPath+"script/**/*.js")
.pipe($.concat("index.js")) //拼接js
.pipe($.babel())
.pipe(gulp.dest(app.devPath+"/js/"))
.pipe($.uglify()) //压缩js
.pipe(gulp.dest(app.prdPath+"/js/"))
})
//image任务
gulp.task("img",()=>{
gulp.src([app.srcPath+"images/app/**/*","!"+app.srcPath+"images/sprites/**/*","!"+app.srcPath+"images/sprites/**"])
.pipe(gulp.dest(app.devPath+"/images/"))
.pipe($.imagemin())
.pipe(gulp.dest(app.prdPath+"/images/"))
})
//制作雪碧图 spritemith
gulp.task("sprite",function(){
gulp.src(app.srcPath+"images/sprites/**/*")
.pipe($.imagemin({ //图片压缩
progressive:true,
use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件
}))
.pipe(spritesmith({
imgName:'images/sprite.png', //合并后大图的名称
cssName:'css/sprite.css',
padding:5,// 每个图片之间的间距，默认为0px
algorithm:'binary-tree',
cssFormat:"less",
cssTemplate:function(data){
// data为对象，保存合成前小图和合成打大图的信息包括小图在大图之中的信息
let arr = [],
width = data.spritesheet.px.width,
height = data.spritesheet.px.height,
url = data.spritesheet.image
data.sprites.forEach(function (sprite) {
arr.push(
".unify-" + sprite.name +
"{" +
"background: url('" + url + "') " +
"no-repeat " +
sprite.px.offset_x + " " + sprite.px.offset_y + ";" +
"background-size: " + width + " " + height + ";" +
"width: " + sprite.px.width + ";" +
"height: " + sprite.px.height + ";" +
"}\n"
)
});
return arr.join("")
}
}))
.pipe(gulp.dest(app.devPath+"/"))
.pipe(gulp.dest(app.prdPath+"/"))
})
//clean任务
gulp.task("clean",()=>{
gulp.src([app.devPath,app.prdPath])
.pipe($.clean())
})
//build任务
gulp.task("build",['html','css','js','json','img','sprite']);
//server任务
gulp.task("server",['build'],()=>{
$.connect.server({
root:[app.prdPath], //服务器从那个路径开始读取，默认从开发路径读取
livereload:true, //每当写完之后自动刷新浏览器，只支持高版本浏览器
port:3344//端口号
})
open("http://localhost:3344") //启动服务器，打开页面
watchFuncs();
})
//watch监听任务
const watchPath = {
html:app.srcPath + "**/*.html",
less:app.srcPath + "css/**/*.less",
json:app.srcPath + "data/**/*.json",
js:app.srcPath + "script/**/*.js",
img:app.srcPath + "images/**/*"
}
gulp.task("watch",()=>{
watchFuncs()
})
let watchFuncs = ()=>{
gulp.watch(watchPath.html,["html"])
gulp.watch(watchPath.less,["css"])
gulp.watch(watchPath.json,["json"])
gulp.watch(watchPath.js,["js"])
gulp.watch(watchPath.img,["img"])
}
//默认执行任务
gulp.task("default",['server'])
