diff --git a/.gitignore b/.gitignore index 3440d08..a303481 100755 --- a/.gitignore +++ b/.gitignore @@ -48,6 +48,7 @@ temp/ /db-sync /web/wp-content/upgrade/ /web/cockpit +/web/controlcentre /.sass-cache /composer-merge/* /web/wp-content/plugins/* @@ -58,6 +59,7 @@ temp/ /web/wp-content/themes/timber*/ /web/wp-content/themes/woodchippr/css/ /web/wp-content/themes/woodchippr/js/ +/web/wp-content/themes/woodchippr/views/partials/inline-svgsprite.twig composer.lock /bower_components /web/wp-content/w3tc-config/* diff --git a/composer.json b/composer.json index 63e890b..13ff30b 100755 --- a/composer.json +++ b/composer.json @@ -23,7 +23,7 @@ "wpackagist-plugin/wordpress-seo": "*" }, "extra": { - "wordpress-install-dir": "web/cockpit", + "wordpress-install-dir": "web/controlcentre", "installer-paths" : { "web/wp-content/mu-plugins/{$name}": ["type:wordpress-plugin"] }, diff --git a/config.json b/config.json index f254b13..1df5032 100644 --- a/config.json +++ b/config.json @@ -1,6 +1,9 @@ { - "projectDir": "wp-content/themes/woodchippr/", - "bundles":{ - "main":"./dev/js/main.js" - } + "projectDir": "web/wp-content/themes/woodchippr/", + "bundles":[ + "main.js" + ], + "sassfiles": [ + "style.scss" + ] } diff --git a/dev/svg/close.svg b/dev/svg/close.svg new file mode 100644 index 0000000..9aed8a7 --- /dev/null +++ b/dev/svg/close.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/gulp/lint.js b/gulp/lint.js new file mode 100644 index 0000000..27f57b5 --- /dev/null +++ b/gulp/lint.js @@ -0,0 +1,13 @@ +var gulp = require("gulp"), + eslint = require("gulp-eslint"), + notify = require("gulp-notify"); + +gulp.task("lint", function() { + "use strict"; + var base = process.env.DEV_FILES_DIR+'/'+process.env.JS_DIR+'/'; + return gulp.src(base+"*.js") + .pipe(eslint()) + .pipe(eslint.format()) + .pipe(eslint.failOnError()) + .on("error", notify.onError()); +}); diff --git a/gulp/sass.js b/gulp/sass.js new file mode 100644 index 0000000..5abf768 --- /dev/null +++ b/gulp/sass.js @@ -0,0 +1,41 @@ +require('dotenv').config(); + +var gulp = require("gulp"), + gulpif = require("gulp-if"), + plumber = require("gulp-plumber"), + sass = require("gulp-sass"), + prefix = require("gulp-autoprefixer"), + notify = require("gulp-notify"), + sourcemaps = require("gulp-sourcemaps"), + csso = require("gulp-csso"), + // merge = require('merge-stream'); + config = require("../config.json"), + livereload = require("gulp-livereload"); + +// Compile Our Sass +gulp.task("sass", function() { + "use strict"; + + var base = process.env.DEV_FILES_DIR+'/'+process.env.SCSS_DIR+'/'; + + var entryPoints = config.sassfiles.reduce(function(accum, src){ + accum.push(base+src); + return accum; + }, []); + + return gulp.src(entryPoints) + .pipe(plumber({ + errorHandler: notify.onError("Error: <%= error.message %>") + })) + .pipe(gulpif(process.env.NODE_ENV !== "production", sourcemaps.init())) + .pipe(sass({ + style: "compact", + errLogToConsole: false + })) + .pipe(prefix(JSON.parse(process.env.AUTOPREFIX_ARGS))) + .pipe(gulpif(process.env.NODE_ENV !== "production", sourcemaps.write())) + .pipe(gulpif(process.env.NODE_ENV === "production", csso())) + .pipe(gulp.dest(config.projectDir + "css/")) + .pipe(livereload()) + .pipe(notify("updated")); +}); diff --git a/gulp/scripts.js b/gulp/scripts.js new file mode 100644 index 0000000..cbcbc94 --- /dev/null +++ b/gulp/scripts.js @@ -0,0 +1,35 @@ +var gulp = require("gulp"), + webpackStream = require('webpack-stream'), + webpack = require('webpack'), + livereload = require("gulp-livereload"), + config = require("../config.json"); + +// compile scripts +gulp.task("scripts", function() { + "use strict"; + + var base = './'+process.env.DEV_FILES_DIR+'/'+process.env.JS_DIR+'/'; + + var entryPoints = config.bundles.reduce(function(accum, src){ + accum.push(base+src); + return accum; + }, []); + + var options = { + entry: entryPoints, + output: { + filename: "[name].bundle.js" + } + } + + if(process.env.NODE_ENV === "development"){ + options.devtool = 'source-map'; + } else { + options.plugins = [new webpack.optimize.UglifyJsPlugin()]; + } + + return gulp.src(entryPoints, {base:base}) + .pipe(webpackStream(options, webpack)) + .pipe(gulp.dest(config.projectDir+"/js")) + .pipe(livereload()); +}); diff --git a/gulp/svgstore.js b/gulp/svgstore.js new file mode 100644 index 0000000..7ae348a --- /dev/null +++ b/gulp/svgstore.js @@ -0,0 +1,33 @@ +require('dotenv').config(); +// Include gulp +var gulp = require("gulp"), + cheerio = require("gulp-cheerio"), + svgstore = require("gulp-svgstore"), + svgmin = require("gulp-svgmin"), + notify = require("gulp-notify"), + config = require("../config.json"), + rename = require("gulp-rename"); + +gulp.task("svgstore", function () { + "use strict"; + return gulp + .src(process.env.DEV_FILES_DIR+'/'+process.env.SVG_DIR+"/*.svg") + .pipe(cheerio({ + run: function ($) { + $("[fill]").removeAttr("fill"); + }, + parserOptions: { xmlMode: true } + })) + .pipe(svgmin()) + .pipe(svgstore({inlineSvg: true})) + .pipe(cheerio({ + run: function ($) { + $("svg").attr("width", 0); + $("svg").attr("height", 0); + }, + parserOptions: { xmlMode: true } + })) + .pipe(rename("inline-svgsprite.twig")) + .pipe(gulp.dest(config.projectDir + "views/partials/")) + .pipe(notify("SVGs Exported")); +}); diff --git a/gulpfile.js b/gulpfile.js index 7c967dc..9874893 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,107 +1,37 @@ +require('dotenv').config(); // Include gulp -var gulp = require("gulp"), +var requireDir = require('require-dir'), + gulp = require("gulp"), // Include Our Plugins - eslint = require("gulp-eslint") - livereload = require("gulp-livereload"), - csso = require("gulp-csso"), - sass = require("gulp-sass"), - gulpif = require("gulp-if"), - prefix = require("gulp-autoprefixer"), - notify = require("gulp-notify"), - svgstore = require("gulp-svgstore"), - svgmin = require("gulp-svgmin"), - rename = require("gulp-rename"), - cheerio = require("gulp-cheerio"), - plumber = require("gulp-plumber"), - sourcemaps = require("gulp-sourcemaps"), - webpackStream = require('webpack-stream'); - webpack = require('webpack'); + livereload = require("gulp-livereload"); -var config = require("./config.json"); +requireDir('./gulp', { recurse: true }); -var env = process.env.NODE_ENV || "development"; - -gulp.task("lint", function() { - "use strict"; - return gulp.src("dev/js/*.js") - .pipe(eslint()) - .pipe(eslint.format()) - .pipe(eslint.failOnError()) - .on("error", notify.onError()); -}); - -// Compile Our Sass -gulp.task("sass", function() { - "use strict"; - return gulp.src("dev/scss/*.scss") - .pipe(plumber({ - errorHandler: notify.onError("Error: <%= error.message %>") - })) - .pipe(gulpif(env !== "production", sourcemaps.init())) - .pipe(sass({ - style: "compact", - errLogToConsole: false - })) - .pipe(prefix("last 2 version", "> 1%", "ie 9", "ie 8")) - .pipe(gulpif(env !== "production", sourcemaps.write())) - .pipe(gulpif(env === "production", csso())) - .pipe(gulp.dest(config.projectDir + "css/")) - .pipe(livereload()) - .pipe(notify("updated")); -}); - -// compile scripts -gulp.task("scripts", function() { - "use strict"; - - return gulp.src(config.bundles.main) - .pipe(webpackStream({ - entry: config.bundles, - output: { - filename: "[name].bundle.js" - }, - devtool: 'source-map', - plugins:[new webpack.optimize.UglifyJsPlugin()] - }, webpack)) - .pipe(gulp.dest(config.projectDir+"/js")); -}); +// Watch Files For Changes +gulp.task("startwatch", ["lint", "sass", "scripts", "svgstore", "watch"]); -gulp.task("svgstore", function () { +gulp.task("watch", function() { "use strict"; - return gulp - .src("dev/svg/*.svg") - .pipe(cheerio({ - run: function ($) { - $("[fill]").removeAttr("fill"); - }, - parserOptions: { xmlMode: true } - })) - .pipe(svgmin()) - .pipe(svgstore({inlineSvg: true})) - .pipe(cheerio({ - run: function ($) { - $("svg").attr("width", 0); - $("svg").attr("height", 0); - }, - parserOptions: { xmlMode: true } - })) - .pipe(rename("inline-svgsprite.svg.twig")) - .pipe(gulp.dest(config.projectDir + "views/partials/")) - .pipe(notify("SVGs Exported")); + livereload.listen(); + gulp.watch( + process.env.DEV_FILES_DIR+'/'+process.env.JS_DIR+"/**/**/*.js", + ["lint", "scripts"] + ); + gulp.watch( + process.env.DEV_FILES_DIR+'/'+process.env.SCSS_DIR+"/**/**/*.scss", + ["sass"] + ); + gulp.watch( + process.env.DEV_FILES_DIR+'/'+process.env.SVG_DIR+"/**/**/*.svg", + ["svgstore"] + ); + gulp.watch("wp-content/**/**/**/*.twig").on("change", function(file){ + livereload.reload(file); + notify("Templates Refreshed"); + }); }); -// Watch Files For Changes -gulp.task("watch", function() { - "use strict"; - livereload.listen(); - gulp.watch("dev/js/**/**/*.js", ["lint", "scripts"]); - gulp.watch("dev/scss/**/**/*.scss", ["sass"]); - gulp.watch("dev/svg/**/**/*.svg", ["svgstore"]); - gulp.watch("wp-content/**/**/**/*.twig").on("change", function(file){ - livereload.reload(file); - notify("Templates Refreshed"); - }); -}); +gulp.task("build", ["lint", "sass", "scripts", "svgstore"]); -gulp.task("default", ["lint", "sass", "scripts", "svgstore", "watch"]); +gulp.task("default", ["lint", "sass", "scripts", "svgstore"]); diff --git a/package.json b/package.json index f7c0e5f..aecc164 100644 --- a/package.json +++ b/package.json @@ -6,30 +6,36 @@ "repository": "https://Gaffen@bitbucket.org/spritzcreative/coqochi.git", "devDependencies": { "colors": "^1.1.2", - "prompt": "^1.0.0", - "gulp": "^3.9.0", - "gulp-autoprefixer": "3.1.0", + "dotenv": "^2.0.0", + "gulp": "^3.9.1", + "gulp-autoprefixer": "^3.1.0", "gulp-cheerio": "^0.6.2", - "gulp-csso": "^1.0.1", - "gulp-eslint": "^1.1.1", - "gulp-if": "^2.0.0", + "gulp-csso": "^1.1.0", + "gulp-eslint": "^3.0.1", + "gulp-if": "^2.0.2", "gulp-livereload": "^3.8.1", "gulp-notify": "^2.2.0", - "gulp-plumber": "^1.0.1", + "gulp-plumber": "^1.1.0", "gulp-rename": "^1.2.2", - "gulp-sass": "^2.1.0", - "gulp-sourcemaps": "^1.6.0", - "gulp-svgmin": "^1.2.0", + "gulp-sass": "^2.3.2", + "gulp-sourcemaps": "^1.9.1", + "gulp-svgmin": "^1.2.3", "gulp-svgstore": "^5.0.5", "gulp-uglify": "^1.5.1", + "merge-stream": "^1.0.1", + "prompt": "^1.0.0", + "require-dir": "^0.3.1", "webpack": "^1.12.14", "webpack-stream": "^3.1.0" }, "scripts": { "setup": "node ./tasks/init.js", + "start": "gulp watch", + "build": "gulp", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Matthew Gaffen", "license": "ISC", - "browser": {} + "browser": {}, + "dependencies": {} } diff --git a/sample.env b/sample.env index cea0e6f..5e516f4 100644 --- a/sample.env +++ b/sample.env @@ -18,6 +18,14 @@ WP_CONTENT_URL=/ # Debug settings DEBUG=false +# Build tool settings +DEV_FILES_DIR=dev +JS_DIR=js +SCSS_DIR=scss +NODE_ENV=production +AUTOPREFIX_ARGS=["last 2 version", "> 1%", "ie 9", "ie 8"] +SVG_DIR=svg + # Salts - use https://github.com/aaemnnosttv/wp-cli-dotenv-command # to autogenerate wordpress salts, or simply visit # https://roots.io/salts.html to cut and paste diff --git a/web/index.php b/web/index.php index da2f540..80597d3 100755 --- a/web/index.php +++ b/web/index.php @@ -1,3 +1,3 @@