tzy-static/template/gulpfile.js

static pages build tool

const fs = require("fs");
const path = require("path");
const iconv = require("iconv-lite");
const gulp = require("gulp");
const del = require("del");
const fileinclude = require("gulp-file-include");
const sass = require("gulp-sass");
const spritesmith = require("gulp.spritesmith");
const browserSync = require("browser-sync").create();
const runSequence = require("run-sequence");
let distUrl = null;

//读取输出目录并清理相关目录
gulp.task("getDistUrl", () => {
  try {
    let data = fs.readFileSync("config.txt");
    distUrl = path.normalize(
      iconv
        .decode(data, "gbk")
        .replace("distUrl=", "")
        .trim()
    );
    return del.sync(["./dist", `${distUrl}/dist`]);
  } catch (err) {
    console.log("初始化输出路径失败，采用默认输出路径");
    return del.sync("./dist");
  }
});
// html 整合
gulp.task("contactHtml", () => {
  return gulp
    .src("src/html/pages/*.html")
    .pipe(fileinclude())
    .pipe(gulp.dest("./dist/html")).pipe(browserSync.reload({stream:true}));
});
// 编译sass文件
gulp.task("sass", () => {
  return gulp
    .src(["src/css/project/pages/*.scss", "src/css/project/common/*.scss"])
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest("./dist/css")).pipe(browserSync.reload({stream:true}));
});

//合并雪碧图
gulp.task("sprite", () => {
  return gulp
    .src("src/img/assets/*.png")
    .pipe(
      spritesmith({
        imgName: `./img/sprite.png`,
        cssName: `./css/sprite.css`
      })
    )
    .pipe(gulp.dest("./dist")).pipe(browserSync.reload({stream:true}));
});

//复制第三方资源和静态图片
gulp.task("copyStatic", () => {
  gulp.src("src/css/third-party/*.css").pipe(gulp.dest("./dist/css"));
  gulp.src("src/img/static/*").pipe(gulp.dest("./dist/img"));
  gulp.src("src/js/*.js").pipe(gulp.dest("./dist/js")).pipe(browserSync.reload({stream:true}));
  return;
});

//复制输出目录到制定目录
gulp.task("copyDist", () => {
  if(distUrl!==null){
    del.sync(`${distUrl}/dist`);
    gulp.src("dist/*/*").pipe(gulp.dest(distUrl));
  }
  return;
});

// 开启静态服务器
gulp.task("browser-sync", () => {
  browserSync.init({
    server: {
      baseDir: "./dist"
    }
  });
});

//监听文件变化
gulp.task("monitor",()=>{
  gulp.watch(['src/css/project/*/*.scss'], ['sass']);
  gulp.watch(['src/img/assets/*.png'], ['sprite']);
  gulp.watch(['src/html/*/*.html'], ['contactHtml']);
  gulp.watch(["src/css/third-party/*.css","src/img/static/*","src/js/*.js"], ['copyStatic']);
  gulp.watch(["./dist/*/*"],["copyDist"])
})

//同步执行以下命令
gulp.task("default", callback => {
  runSequence(
    "getDistUrl",
    ["contactHtml", "sass", "sprite", "copyStatic"],
    "copyDist",
    "monitor",
    "browser-sync",
    callback
  );
});