Gulp的前端工程构建配置

创建一个文件夹并进入，使用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'])

以上配置知识简单的介绍应用，具体可以更具项目需要修改。

注：src下面为开发目录