mizner
12/12/2016 - 12:19 PM

Gulp Wordpress Base

Gulp Wordpress Base

{
  "name": "gulp-press",
  "version": "1.0.0",
  "description": "Build Tools for WordPress via Gulp",
  "main": "index.php",
  "dependencies": {},
  "devDependencies": {
    "babel-core": "^6.20.0",
    "babel-preset-es2015": "^6.18.0",
    "browser-sync": "^2.18.5",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-babel": "^6.1.2",
    "gulp-concat": "^2.6.1",
    "gulp-cssnano": "^2.1.2",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.3.2",
    "gulp-sourcemaps": "^1.9.1",
    "gulp-uglify": "^2.0.0",
    "gulp-util": "^3.0.7",
    "node-sass": "^3.13.1"
  },
  "scripts": {
    "start": ""
  },
  "author": "Mizner",
  "license": "ISC",
  "homepage": "https://gist.github.com/Mizner/4a1fb77e0660f1123241d5669af873ac"
}
const project = "XXXXXX";

const theFiles = [
    // 1st file loads first, 2nd, ect.

];

const fileArray = theFiles.map(function (file) {
    return "assets/scripts/" + file;
});

const gulp = require("gulp"),
    bs = require("browser-sync").create(),
    autoprefixer = require("gulp-autoprefixer"),
    cssnano = require("gulp-cssnano"),
    uglify = require("gulp-uglify"),
    rename = require("gulp-rename"),
    concat = require("gulp-concat"),
    sass = require("gulp-sass"),
    sourcemaps = require("gulp-sourcemaps"),
    babel = require("gulp-babel"),
    plumber = require("gulp-plumber"),
    del = require('del');

gulp.task("sass", () => {
    gulp.src("./assets/styles/**/*.scss")
        .pipe(sourcemaps.init())
        .pipe(sass().on("error", sass.logError))
        .pipe(autoprefixer())
        .pipe(sourcemaps.write())
        .pipe(rename(project + ".min.css"))
        .pipe(gulp.dest("./dist"))
        .pipe(bs.stream())
});

gulp.task("js", () => {
    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("production-sass", () => {
    gulp.src("assets/styles/**/*.scss")
        .pipe(sass().on("error", sass.logError))
        .pipe(autoprefixer())
        .pipe(cssnano())
        .pipe(rename(project + ".min.css"))
        .pipe(gulp.dest("./dist"));
});

gulp.task("browser-sync", () => {
    bs.init(["*"], {
        proxy: project + ".dev",
        root: [__dirname],
        open: {
            file: "index.php"
        }
    });
});

gulp.task("clean:dist", () => {
    return del([
        "dist/**/*" // here we use a globbing pattern to match everything inside the `dist` folder
    ]);
});

gulp.task("watch", ["browser-sync"],  () => {
    gulp.watch("assets/styles/**/*.scss", ["sass"]);
    gulp.watch("./assets/scripts/**/*.js", ["js"]);
    gulp.watch("**/*.php", bs.reload);
    gulp.watch("gulpfile.js").on("change", function () {
        process.exit(0)
    })
});

gulp.task("default", [
    "clean:dist",
    "production-sass",
    "js"
]);