mizner
1/9/2017 - 1:55 PM

Post CSS Gulpfile (in-progress)

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"
]);