Skip to content

Instantly share code, notes, and snippets.

@benfrain benfrain/gulpfile.js
Last active May 24, 2020

Embed
What would you like to do?
Gulp file v3.9.3
var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
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 postcssimport = require("postcss-import");
var postcsseasyimport = require("postcss-easy-import");
var postcssColorFunction = require("postcss-color-function");
var assets = require("postcss-assets");
var nested = require("postcss-nested");
var sourcemaps = require("gulp-sourcemaps");
var compress = true;
gulp.task("css", function () {
var processors = [
postcsseasyimport(),
postcssMixins,
simplevars,
nested,
assets({
relative: true,
}),
postcssColorFunction(),
autoprefixer({ browsers: ["defaults"] }),
cssnano(),
];
// Produce a file list off all needed css files and move them to /build
return gulp
.src("./preCSS/styles.css")
.pipe(postcss(processors))
.pipe(gulp.dest("./css"))
.pipe(notify("Boom! Up in yo CSS face!!"))
.pipe(browserSync.stream());
});
// Static server
gulp.task("browser-sync", function () {
browserSync({
open: false,
proxy: "localhost:8888",
});
});
// Watch
gulp.task("watch", function () {
// Watch .scss files
gulp.watch("preCSS/**/*.css", ["css", browserSync.reload]);
// Watch .js files
gulp.watch(["preJS/**/*.js"], ["js", browserSync.reload]);
// Watch any files in root html, reload on change
gulp.watch("**/*.php", browserSync.reload);
});
// Concatenate & Minify JS
gulp.task("js", function () {
return gulp
.src("preJS/*.js")
.pipe(concat("all.js"))
.pipe(gulp.dest("js/"))
.pipe(notify("Boom! Up in yo JS face!!"))
.pipe(browserSync.stream());
});
gulp.task("default", ["css", "browser-sync", "js", "watch"]);
{
"name": "Quick-setup",
"description": "Basic Gulp niceties for rapidly building stuff",
"version": "0.0.18",
"author": "Ben Frain",
"private": true,
"dependencies": {
"gulp": "^3.9.1",
"postcss": "^6.0.22",
"postcss-assets": "^5.0.0"
},
"devDependencies": {
"autoprefixer": "^8.5.1",
"browser-sync": "^2.24.6",
"browserslist": "4.1.0",
"gulp-notify": "3.2.0",
"cssnano": "^4.0.4",
"gulp-concat": "2.6.1",
"gulp-postcss": "^7.0.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify": "^3.0.1",
"postcss-color-function": "^4.0.1",
"postcss-import": "^11.1.0",
"postcss-easy-import": "3.0.0",
"postcss-mixins": "^6.2.0",
"postcss-nested": "^3.0.0",
"postcss-simple-vars": "^4.1.0",
"natives": "^1.1.6"
}
}
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.