Post CSS Gulpfile (in-progress)
"use strict";
const project = "tryoutPostCSS";
const
dest = "./dist",
fileList = [
"promise.min.js",
"header-scripts/navigation/nav.js",
"header-scripts/navigation/nav-mobile.js",
"header-scripts/fixed-header.js",
"main.js",
];
const
gulp = require("gulp"),
bs = require("browser-sync").create(),
postcss = require("gulp-postcss"),
cssnano = require("gulp-cssnano"), // https://github.com/ben-eb/cssnano
uglify = require("gulp-uglify"),
rename = require("gulp-rename"),
concat = require("gulp-concat"),
sourcemaps = require("gulp-sourcemaps"),
babel = require("gulp-babel"),
plumber = require("gulp-plumber"),
del = require("del");
gulp.task("postCSS", () => {
const plugins = [
require("postcss-sassy-import"),
require("postcss-sassy-mixins"), // https://github.com/postcss/postcss-mixins
require("postcss-simple-vars"), // https://github.com/postcss/postcss-simple-vars
require("postcss-nested"), // https://github.com/postcss/postcss-nested
require("postcss-conditionals"), // https://github.com/andyjansson/postcss-conditionals
require("autoprefixer"), // https://github.com/postcss/autoprefixer
require("postcss-color-function"), // https://github.com/postcss/postcss-color-function
];
return (
gulp.src("./assets/styles/main.scss")
.pipe(sourcemaps.init())
.pipe(postcss(plugins))
.pipe(cssnano({zindex: false}))
.pipe(sourcemaps.write())
.pipe(rename(project + ".min.css"))
.pipe(gulp.dest(dest))
.pipe(bs.stream())
)
});
gulp.task("js", () => {
const path = "assets/scripts/";
const fileArray = fileList.map(function (x) {
return path + x;
});
return (
gulp.src(fileArray)
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(concat("output.min.js")) // concat pulls all our files together before minifying them
.pipe(sourcemaps.write())
.pipe(babel({
presets: ["es2015"]
}))
.pipe(uglify())
.pipe(rename(project + ".min.js"))
.pipe(gulp.dest("./dist"))
.pipe(bs.stream())
)
});
gulp.task("clean:dist", () => {
return del([
"dist/**/*" // here we use a globbing pattern to match everything inside the `dist` folder
]);
});
gulp.task("browser-sync", () => {
bs.init(["*"], {
proxy: project + ".dev",
root: [__dirname],
open: {
file: "index.php"
}
});
});
gulp.task("watch", ["browser-sync"], () => {
gulp.watch("assets/styles/**/*.scss", ["postCSS"]);
gulp.watch("./assets/scripts/**/*.js", ["js"]);
gulp.watch("./assets/scripts/**/*.js");
gulp.watch("**/*.php", bs.reload);
gulp.watch("gulpfile.js").on("change", () => {
process.exit(0)
})
});
gulp.task("default", [
"clean:dist",
"postCSS",
"js"
]);