javascript Gulp＃4.0：简单的gulpfile.js集合

Posted 2021-05-03

"use strict";

const gulp = require("gulp"),
  bs = require("browser-sync").create(),
  sass = require("gulp-sass"),
  autoprefixer = require("gulp-autoprefixer"),
  imagemin = require("gulp-imagemin"),
  imageminGiflossy = require("imagemin-giflossy"),
  imageminMozjpeg = require("imagemin-mozjpeg"),
  imageminPngquant = require("imagemin-pngquant"),
  newer = require("gulp-newer");

const config = {
  css: {
    format: "compressed", // (expanded|nested|compact|compressed)
    maps: {
      generate: true,
      embed: true
    }
  },

  images: {
    optimize: true,
    // optimization settings
    //www.npmjs.com/package/imagemin-pngquant
    png: {
      speed: 5, // 1-10
      quality: 98 // 0-100
    },
    jpeg: {
      quality: 90, //0-100
      progressive: true
    },
    gif: {
      optimize: 3, // 1-3
      lossy: 15
    }
  }
};

const dir = {
  css: {
    src: "./scss/**/*.scss",
    dist: "./"
  },

  img: {
    src: "./images/_unoptimized/**/*.{jpeg,jpg,png,gif,svg}",
    dist: "./images/"
  }
};

var options = {
  autoprefixer: {
    browsers: [
      "last 3 versions",
      "ie >= 8",
      "ios >= 7",
      "android >= 4.4",
      "bb >= 10"
    ],
    cascade: false
  },

  bs: {
    watch: true,
    baseDir: "./",
    proxy: "localhost/example.com/"
  },

  imagemin: [
    imageminPngquant({
      speed: config.images.png.speed,
      quality: config.images.png.quality
    }),
    imageminGiflossy({
      optimizationLevel: config.images.gif.optimize,
      optimize: config.images.gif.optimize,
      lossy: config.images.gif.lossy
    }),
    imagemin.svgo({
      plugins: [
        {
          removeViewBox: false
        }
      ]
    }),
    imagemin.jpegtran({
      progressive: config.images.jpeg.progressive
    }),
    imageminMozjpeg({
      quality: config.images.jpeg.quality,
      progressive: config.images.jpeg.progressive
    })
  ],

  sass: {
    outFile: "./",
    outputStyle: config.css.format,
    sourceMap: config.css.maps.generate,
    sourceMapEmbed: config.css.maps.embed
  }
};

gulp.task("serve", () => {
  bs.init(options.bs);
  gulp.watch(dir.css.src, gulp.parallel("style")).on("change", bs.reload);
  gulp.watch("lib/**/*.php").on("change", bs.reload);
  gulp.watch("*.php").on("change", bs.reload);
  gulp.watch("js/**/*.js").on("change", bs.reload);
});

gulp.task("style", () => {
  return gulp
    .src(dir.css.src)
    .pipe(sass(options.sass).on("error", sass.logError))
    .pipe(autoprefixer(options.autoprefixer))
    .pipe(gulp.dest(dir.css.dist))
    .pipe(bs.stream());
});

gulp.task("images", () => {
  return gulp
    .src(dir.img.src)
    .pipe(newer(dir.img.dist))
    .pipe(imagemin(options.imagemin))
    .pipe(gulp.dest(dir.img.dist))
    .pipe(bs.stream());
});

gulp.task(
  "default",
  gulp.series([gulp.parallel(["style", "images"]), "serve"])
);

"use strict";

const gulp = require("gulp"),
  browserSync = require("browser-sync").create(),
  sass = require("gulp-sass"),
  autoprefixer = require("gulp-autoprefixer");

var options = {
  autoprefixer: {
    browsers: [
      "last 3 versions",
      "ie >= 8",
      "ios >= 7",
      "android >= 4.4",
      "bb >= 10"
    ],
    cascade: false
  },
  browsersync: {
    watch: true,
    baseDir: "./",
    proxy: "localhost/example.com/"
  },
  sass: {
    outFile: "./",
    outputStyle: "compressed",
    sourceMap: true,
    sourceMapEmbed: true
  }
};

gulp.task("serve", () => {
  browserSync.init(options.browsersync);

  gulp
    .watch("scss/**/*.scss", gulp.parallel("style"))
    .on("change", browserSync.reload);
  gulp.watch("lib/**/*.php").on("change", browserSync.reload);
  gulp.watch("*.php").on("change", browserSync.reload);
  gulp.watch("js/**/*.js").on("change", browserSync.reload);
});

gulp.task("style", () => {
  return gulp
    .src("./scss/style.scss")
    .pipe(sass(options.sass).on("error", sass.logError))
    .pipe(autoprefixer(options.autoprefixer))
    .pipe(gulp.dest("./"))
    .pipe(browserSync.stream());
});

gulp.task("default", gulp.series(["style", "serve"]));

"use strict";

const gulp = require("gulp"),
  browserSync = require("browser-sync").create(),
  sass = require("gulp-sass"),
  autoprefixer = require("gulp-autoprefixer");

var options = {
  autoprefixer: {
    browsers: [
      "last 3 versions",
      "ie >= 8",
      "ios >= 7",
      "android >= 4.4",
      "bb >= 10"
    ],
    cascade: false
  },
  browsersync: {
    server: "./"
  },
  sass: {
    outFile: "./",
    outputStyle: "compressed",
    sourceMap: true,
    sourceMapEmbed: true
  }
};

gulp.task("serve", () => {
  browserSync.init(options.browsersync);

  gulp
    .watch("scss/**/*.scss", gulp.parallel("style"))
    .on("change", browserSync.reload);
  gulp.watch("lib/**/*.php").on("change", browserSync.reload);
  gulp.watch("*.php").on("change", browserSync.reload);
  gulp.watch("js/**/*.js").on("change", browserSync.reload);
});

gulp.task("style", () => {
  return gulp
    .src("./scss/style.scss")
    .pipe(sass(options.sass).on("error", sass.logError))
    .pipe(autoprefixer(options.autoprefixer))
    .pipe(gulp.dest("./"))
    .pipe(browserSync.stream());
});

gulp.task("default", gulp.series(["style", "serve"]));