Skip to content

Instantly share code, notes, and snippets.

@benfrain benfrain/gulpfile.js Secret
Created May 24, 2020

Embed
What would you like to do?
Gulpfile v4
var gulp = require("gulp");
var concat = require("gulp-concat");
var postcss = require("gulp-postcss");
var cssnano = require("cssnano");
var notify = require("gulp-notify");
var postcssMixins = require("postcss-mixins");
var simplevars = require("postcss-simple-vars")();
var autoprefixer = require("autoprefixer");
var browserSync = require("browser-sync");
var postcsseasyimport = require("postcss-easy-import");
var postcssColorFunction = require("postcss-color-function");
var assets = require("postcss-assets");
var nested = require("postcss-nested");
const server = browserSync.create();
// Watch
const watchCSS = () => gulp.watch("preCSS/**/*.css", gulp.series(css, reload));
const watchJS = () => gulp.watch("preJS/**/*.js", gulp.series(js, reload));
const watchPHP = () => gulp.watch("**/*.php", reload);
function css() {
var processors = [
postcsseasyimport(),
postcssMixins,
simplevars,
nested,
assets({
relative: true,
}),
postcssColorFunction(),
autoprefixer({ browsers: ["defaults"] }),
cssnano(),
];
return gulp
.src("./preCSS/styles.css")
.pipe(postcss(processors))
.pipe(gulp.dest("./css"))
.pipe(notify("Boom! Up in yo CSS face!!"))
.pipe(browserSync.stream());
}
function serve(done) {
server.init({
open: false,
proxy: "127.0.0.1/wordpress/",
});
done();
}
function reload(done) {
server.reload();
done();
}
function js(done) {
gulp.src("preJS/*.js", { sourcemaps: true })
.pipe(concat("all.js"))
.pipe(gulp.dest("js/"))
.pipe(notify("Boom! Up in yo JS face!!"))
.pipe(browserSync.stream());
done();
}
const dev = gulp.series(
serve,
gulp.parallel(css, js),
gulp.parallel(watchCSS, watchJS, watchPHP)
);
exports.default = dev;
{
"name": "Quick-setup",
"description": "Basic Gulp niceties for rapidly building stuff",
"version": "0.0.18",
"author": "Ben Frain",
"private": true,
"dependencies": {
"gulp": "^4.0.2",
"postcss": "^7.0.28",
"postcss-assets": "^5.0.0"
},
"devDependencies": {
"autoprefixer": "^9.7.6",
"browser-sync": "^2.26.7",
"gulp-notify": "3.2.0",
"cssnano": "^4.1.10",
"gulp-concat": "2.6.1",
"gulp-postcss": "^8.0.0",
"gulp-sourcemaps": "^2.6.5",
"postcss-color-function": "^4.1.0",
"postcss-import": "^12.0.1",
"postcss-mixins": "^6.2.0",
"postcss-nested": "^4.2.1",
"postcss-simple-vars": "^4.1.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.