ahmadawais / wpgulp

An advanced Gulp workflow for WordPress development with extensive documentation. Used by 40,000+ themes and plugins.

📟 Learn to build CLI DevTools, like WPGulp with me at NodeCLI.com.

WordPress Gulp Workflow

WPGulp (WordPress Gulp) 🎯 An advanced & extensively documented Gulp WordPress workflow. Kick-start a build-workflow for your WordPress plugins and themes with Gulp.
A FOSS (Free & Open Source Software) project. Maintained by @AhmadAwais.

📦 WPGulp Can Do THAT™

WPGulp is an advanced & extensively documented Gulp.js + WordPress workflow. It can help you kick-start a build-workflow for your WordPress plugins and themes with Gulp.js, save you a lot of grunt work time, follow the DRY (Don't Repeat Yourself) principle, and #0CJS Zero-config JavaScript startup but still configurable via wpgulp.config.js file. It is:

• 🥞 Versioned ✓
• 🤠 Updatable ✓
• 🗃 Set of sane-defaults ✓

💻 DEV ENVIRONMENT

• Live reload browser with BrowserSync
• Hotloading styles with CSS Injection

🎨 STYLES

• Sass to CSS conversion
• Merging media queries
• Error handling
• Auto-prefixing
• Minification
• Sourcemaps

🌋 JavaScript

• Concatenation
• Minification/uglification
• Separate vendor and custom JS files handling

🌁 IMAGES

• Minification/optimization of images
• File types: .png, .jpg, .jpeg, .gif, .svg

💯 TRANSLATION

• Generates .pot translation file for i18n and l10n

👀 WATCHING

• For changes in files to recompile
• File types: .css, .html, .php, .js

Getting Started

⚡️ Quick Overview

Run step #1, #2, and #3 quickly in one go — Run inside local WP install's theme/plugin folder E.g. /wp.local/wp-content/plugins/your-plugin or /wp.local/wp-content/themes/your-theme directory.

# 1— Install WPGulp in your WordPress theme/plugin.
npx wpgulp
# 2— Now configure variables inside the `wpgulp.config.js` file.
# 3— Start your npm build workflow.
npm start

(npx is a package runner tool that comes with npm 5.2+ and higher).

🎛 If you want to study the detailed installation of step #1 , #2, and #3 — then take a look at the steps below.

STEP #0 — Don't have Node.js + npm installed? Read this. (CLICK TO EXPAND!)

In case you are an absolute beginner to the world of Node.js, JavaScript, and npm packages — all you need to do is go to the Node's site download + install Node on your system. This will install both Node.js and npm, i.e., node package manager — the command line interface of Node.js.

You can verify the install by opening your terminal app and typing...

node -v
# Results into v9.11.2 — make sure you have Node >= 8 installed.

npm -v
# Results into 6.2.0 — make sure you have npm >= 5.3 installed.

→ STEP #1 — Download the Required Files

1. In the terminal go to the root folder of your WordPress plugin/theme
2. Run the following command to download all the files in the WPGulp/src folder

It'll take a couple of minutes to install.

npx wpgulp

(npx is a package runner tool that comes with npm 5.2+ and higher).

⚠️ I'm assuming that there are no previously present similar files in the root of your folder. Otherwise, you need to merge these very carefully. E.g. You can include the scripts, devDependencies in your current package.json file and so on for other files. If you run the above command all similar files will be overwritten.

→ STEP #2 — Editing the Project Variables

Configure the project paths and other variables inside the wpgulp.config.js file. This is a compulsory step.

→ STEP #3 — Start your project

Once the installation is done, you can open your project (WordPress plugin/theme) folder and run the start script.

npm start

# To stop press CTRL (⌃) + C

→ OPTIONAL STEP #4 — More Scripts/Tasks

To optimize images and generate WP POT translation file, or generate a RTL stylesheet you can run the following commands

# To optimize images.
npm run images

# To generate WP POT translation file.
npm run translate

# To generate RTL stylesheets and Sourcemap.
npm run styles-rtl

# To generate theme/plugin zip file without extranious files.
npm run zip

How to Update?

1. Download all the latest files in the WPGulp/src folder inside the root folder of your WordPress plugin/theme by running npx install-wpgulp it will overwrite all the wpgulp files.
2. Open terminal and Install WPGulp's node dependencies by running the npm install commands in the root folder of your WordPress plugin/theme.

Changelog

Read what's 📦 new, 👌 improved, 🐛 fixed, and if 📖 docs got updated.

👉 Go read the entire changelog at this link — WPGulp Changelog →

Nothing's ever complete, so bear with us while we keep iterating towards a better future.

'Coz every night I lie in bed
The brightest colors fill my head
A million dreams are keeping me awake
I think of what the world could be
A vision of the one I see
A million dreams is all it's gonna take
A million dreams for the world we're gonna make ...

... listen to → A million dreams!

Sponsor

Me (Ahmad Awais) and my incredible wife (Maedah Batool) are two engineers who fell in love with open source and then with each other. You can read more about me here. If you or your company use any of my projects or like what I’m doing then consider backing me. I'm in this for the long run. An open-source developer advocate.

NodeCLI.com — Learn to build Node.js CLI Automation

This repository is part of the NodeCLI.com course.

After building hundreds of developer automation tools used by millions of developers, I am sharing exactly how you can do it yourself with minimum effective effort. Learn to build Node.js & JavaScript based CLI (Command Line Interface) apps. Automate the grunt work, do more in less time, impress your manager, and help the community. → I'm sharing it all in this online video course. Node CLI Automation without wasting a 1,000 hours →

🙌 THEDEVCOUPLE PARTNERS

This open source project is maintained by the help of awesome businesses listed below. What? Read more about it →

License & Attribution

MIT © Ahmad Awais.

This project is inspired by the work of many awesome developers especially those who contribute to this project, Gulp.js, Babel, and many other dependencies as listed in the package.json file. FOSS (Free & Open Source Software) for the win.

ahmadawais	MaedahBatool	akmur	marianrick	asharirfan	JeremyEnglert

ajitbohra	noplanman	cdils	selrond	EugenioPetulla	FrankM1

isaacdanielanderson	JeffMatson	AdnanMuhib	mauryaratan	richtabor	saqibameen

slushman

wpgulp's Issues

`package-lock.json` is not being ignored, nor present

package-lock.json is created upon npm install, but it's not in this repository, nor present in .gitignore - what's the expected behavior here @ahmadawais?

Setting up Google Chrome workspace & sourcemaps?

Hi,
for some reason I can't make sourcemaps to work with Chrome workspaces.

I've tried with style.min.css but obviously it didn't work, then I've tried with regular style.css but I still don't see SASS partials, only the style.css file. What should you map to what in workspace?

Hopefully it makes sense.

📦 NEW: Add RTL stylesheet capability

I'd like to add the ability to optionally:

• generate an RTL stylesheet,
• create a sourcemap,
• and minify it.

Using gulp-rtlcss (which uses rtlcss I can take care of those first two bullets. The third I can do with gulp-minifycss (which is already included in WP Gulp).

I'd like to get opinions on the best way to go about this. For example, here are options I'm thinking about:

1. Extend the current Gulp styles task to include the three RTL items. The biggest con here is that not everybody wants/needs to generate RTL stylesheets.

2. Create another Gulp task ( styles-RTL maybe?) and replicate the functionality of the styles task, but for RTL. The benefit would be that you'd only need to run this task if you needed RTL.

I'm leaning toward that separate option, but would appreciate opinions as I'm pretty new to working with Gulp and don't have a good grasp on performance implications... Thoughts?

Sourcemaps are written in nested directory

Per the documentation of gulp-sourcemaps, when writing to an external sourcemap file, the path provided to sourcemaps.write() should be relative to the path of the source file(s) destination.
The config of this project uses styleDestination for the sourcemaps.write() destination, meaning it gets nested within incorrectly created subdirectories.
The fix for this is to simply provide ./ as the sourcemap destination, meaning it will get created alongside the compiled files.

🙌 Migrating to WPGulp v2.0.0

This issue is here to maintain a list of issues that you might face while migrating to or testing the new version of WPGulp i.e. version 2.0.0. Take a look at #61.

• Run npm i -g gulp-cli if you run into some weird issues like these.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Update gulp-wp-pot destination

The author of gulp-wp-pot update the project last week and it appears the destination now works differently. Instead of the being the path, like in the current line 309, it should be the output file. Line 309 should now be:

.pipe(gulp.dest(destFile))

🚀 WPGulp 2.0 Goals + Call for Contributors!

🙌 Hey, folks!

Thanks for entrusting me and my code and using WPGulp is thousands of projects. I am humbled by how one single file project has changed my life and the way I look at #OpenSource now. 600+ stargazers, 100+ forks, ~50 watchers. WOW!

🤔 For quite some time I have been thinking of what would WPGulp 2.0 look like in the world of Webpacks, Parcels, and RollUps. :)

🎯 Glad to announce that I have started working on the next version of WPGulp with the support from the amazing WordPress community (you can see the WPCouple partners list on the readme file).

🔥 WPGulp 2.0 Feature Exploration

I have a lot of ideas about how we'll go about it. And I'll be updating this issue as such. I'd love to get some input on this one from all of you. Here're is a non-exhaustive list of what I think we should build next.

- [x] [📃 Development Branch for WPGulp v2.0.0] It's live…

• 💯 ES6 or ESNext Support —(Progress → #67)
• 👋 Gulp 4.0 Incremental Builds and Caching —(Progress → #63 )
• 🔬 ESLint + (optionally) Prettier Integration with WordPress Standards — (Progress #73)
• ⚒ Better Error handling for all the tasks — (Progress #68)
• 📚 Improved Image Caching — (Progress #70)
• 🛡 Improve Sass Task + Update NPM Modules — (Progress #74)
• ☕️ Separate Config File —(Progress → #65 )
  — Separation of concerns: Config file to be edited where gulpfile.js remains independent for easy updates. Yes, I am thinking the new version of WPGulp should be modular and easily updateable.
• 📦 New logo —(Progress → #62)
• ⚡️ Better Documentation — led by @MaedahBatool
• 🗃 Improved architecture — Separate source and build folders.
• 🤔 Exploration of an NPM Scripts alternate or a CLI. WPGulp that could be installed as a devdependency and it could rely on config.js file + a few NPM Scripts to do what it does behind the scenes for zero config setups.
• 👊 Some inspiration from create-react-app to make the build process easier.

Would you like to add something? Now's the time to speak! (Or forever hold your peace. OK that was a joke, feel free to create issues, send PR's, and comment below).

👉 Kindly, send the pull requests against the Development Branch for WPGulp v2.0.0.

Peace! ✌️

P.S. I'll be slow to respond being on vacations and all but I wanted to put my thought process out there so that we can build a better new version of WPGulp next year.

📣 This is also a call for contributors. Do reach out. Any level of contribution from your end would mean a lot to the WPGulp project.

Dependency updates

Should any of the dependencies be updated in package.json? There are a couple in there.

Is there any advantage to doing that?

Edit: it was jsut me being stupid

Please close, it was just my stupidity causing an issue

Sorry :)

Make a WPWebpack version like WPGulp

because why not.

loving WPGulp BTW

Remove / drastically eliminate comments

Comments are widely considered Code smell.

Aside from that, I've personally found them really annoying while working with WPGulp.

In my view,

1. Gulp's API is reasonably self-documentative to not need any comments
2. Comments, in general, should tell why is the code here, not what it's doing; comments in WPGulp are basically the same thing pipe()s do, just rewritten in English
3. Keeping comments in sync with the code, once one starts customising WPGulp tasks is a real pain in the ass

@ahmadawais what do you think?

Duplicate output CSS file.

I want to create these structures in my WP theme:

/src/
-- /scss/
---- /main.scss
----/base/
------/typography.scss
----/modules/
----/partials/
-- /js/
----/vendor/
----/lib/
----/modules/

And tried to modify gulpfile.js as below:

// Style related.
var styleSRC                = './src/scss/*.scss'; // Path to main .scss file.
var styleDestination        = './assets/css/'; // Path to place the compiled CSS file.
// Default set to root folder.

However when output, it loads to assets/css/assets/css/main.min.css

Can you please check that kind of issue?

📦 New Logo for WPGulp

The task here is to create a new LOGO for the new WPGulp version 2.0.0.

• Must be red (Gulp is red)
• Different vertical and horizontal sizes
• Featured images or press kit for blogs to share

This is one of the tasks from our goals #61 for WPGulp v2.0.0
Peace! ✌️

Newly added files not detected by browser-sync watch task

A few times I thought browser-sync was broken or not configured the correct way, as newly added files will not be recognized in the watch folders.

For example I add _global.scss as file, import it in /scss/style.scss:

• when I click save inside style.scss, the import runs and everything seems to be fine
• when I click save inside _global.scss nothing happens

After stopping and running the gulp task again, saving the new _global.scss file although does cause a hot reload.

Is there a way to detect newly added files inside gulp and register them? I did not found anything about this in the web to add some input on my own.

Discussion: Remove Gulp Global Dependency in 2.0

Since we're moving to Gulp 4 with 2.0, I propose we drop the global Gulp dependency. Many users will have legacy projects running on Gulp 3, which will break if Gulp 4 is installed globally.

From a users perspective, the largest change would be how tasks are called. Instead of running gulp, a user would run npm run gulp. This applies to other tasks as well - gulp vendorsJS becomes npm run vendorsJS.

If this is a change we would like to move forward with, I would be happy to implement and push a PR.

[SOLVED] Unable to compile Sass subdirectories

Hi Ahmad,
congrats for your hard work with this repo, I was looking to find a solution to implement BrowserSync and Gulp in my WordPress Theme Development workflow.

Thanks to your repo now I am able to solve that!

Anyway I have a little problem, I've created a partials/ folder in my scss/ folder (I've renamed from your css/ to fit my needs) and I noticed that I am unable to let compile the imported partials when I modify them.

The only thing that I am able to do is run Gulp when I edit the style.scss file. This makes my work a little more complicated since to have the compiled CSS and to reload the browser I still have to update the style.scss file...

I've tried to modify the Gulpfile.js but seems that everything is ok because on the watchers there is the following code:

var styleWatchFiles         = './scss/**/*.scss';
gulp.task( 'default', ['styles', 'vendorsJs', 'customJS', 'images', 'browser-sync'], function () {
  gulp.watch( styleWatchFiles, [ 'styles' ] ); // Reload on SCSS file changes.
 });

I've edited your code to not mess this issue but from my point of view everything is fine. The styleWatchFiles is set properly but the watcher does not work...

Can you help me up with it?

⚒ Better Error Handling for All the Tasks

WPGulp's error handling is trivial at best. I have had implemented different error handlers for my WordPress projects, I want to improve upon that part of WPGulp in the next version.

• Handle all errors without breaking the dev-workflow.
• Improved error reporting.
• Maybe use chalk to make the console look better.

Translation folder path

Just to notify that 'translate' gulp task compiles the .pot file into the wrong folder because

gulp.dest(destFile)

should be

gulp.dest(translatePath)

Thanks for the great job you've done

Vendor files ordering

Hi @ahmadawais ,

First thanks for this project!

Let say I want to control the order of how the vendors are loaded, is there a better way then prefixing the file I need to load first with something like 0_ ?

Bootstrap 4 relies on tether.js, so I need to load it first :)

💯 ES6 or ESNext Support

WPGulp 2.0 needs to support ES6/7/8 or let's call it ESNext. I am open to suggestions on how we can handle this. This is a two-fold issue and the todo list is as follows:

• Convert JS to ESNext
• Convert WPGulp's code into ESNext

Peace! ✌️

[RESOLVED] Watch commands taking too much time within Default task

I'm using WPGulp build script as a base and I've noticed that when I run the default gulp task by running gulp command, each of the dependent task took time in a few milli seconds to finish but still the default task is taking 4-8 minutes to finish, I tried commenting out watch commands within the default task and turns out these commands were causing all this delay.

How to resolve this? Is it machine specific issue?

UPDATE: The real culprit is projectPHPWatchFiles watch command. If I comment out only this command the build time decreased to only 15 seconds.

PS: My laptop has 4 GB of RAM and 1.7Ghz i3 processor.

Server running

Sorry for the question but do I need to have MAMP running?

I'm trying to run my project but to no avail.

Thank you!

Compatibility with Linux 64bit version due gulp-sass version

Expected Behavior

npm install do not fails on linux 64bit version

Actual Behavior

npm install thorw an error because of the gulp-sass version is no more compatibile

How to solve

Update the gulp-sass version to ^3.1.0 in package.json

BrowserSync is constantly refrshing

HI,

my browsersync is constantly refreshing and I can't figure out why. There is some HTML loaded via JS - could this be the issue?

Screencast: http://youtu.be/3wM1-Bui0Qs

/**
 * Gulpfile.
 *
 * Gulp with WordPress.
 *
 * Implements:
 *      1. Live reloads browser with BrowserSync.
 *      2. CSS: Sass to CSS conversion, error catching, Autoprefixing, Sourcemaps,
 *         CSS minification, and Merge Media Queries.
 *      3. JS: Concatenates & uglifies Vendor and Custom JS files.
 *      4. Images: Minifies PNG, JPEG, GIF and SVG images.
 *      5. Watches files for changes in CSS or JS.
 *      6. Watches files for changes in PHP.
 *      7. Corrects the line endings.
 *      8. InjectCSS instead of browser page reload.
 *      9. Generates .pot file for i18n and l10n.
 *
 * @author Ahmad Awais (@ahmadawais)
 * @version 1.0.3
 */

/**
 * Configuration.
 *
 * Project Configuration for gulp tasks.
 *
 * In paths you can add <<glob or array of globs>>. Edit the variables as per your project requirements.
 */

// START Editing Project Variables.
// Project related.
var project = 'Matrix42-2017-Theme'; // Project Name.
var projectURL = 'matrix42.dev'; // Project URL. Could be something like localhost:8888.
var productURL = './'; // Theme/Plugin URL. Leave it like it is, since our gulpfile.js lives in the root folder.

// Translation related.
var text_domain = 'MX42'; // Your textdomain here.
var destFile = 'MX42.pot'; // Name of the transalation file.
var packageName = 'MX42'; // Package name.
var bugReport = 'https://matrix42.com'; // Where can users report bugs.
var lastTranslator = 'Marketing <[email protected]>'; // Last translator Email ID.
var team = 'Marketing <[email protected]>'; // Team's Email ID.
var translatePath = './languages' // Where to save the translation files.

// Style related.
var styleSRC = './assets/css/style.scss'; // Path to main .scss file.
var styleDestination = './'; // Path to place the compiled CSS file.
// Defualt set to root folder.

// JS Vendor related.
var jsVendorSRC = './assets/js/vendor/*.js'; // Path to JS vendor folder.
var jsVendorDestination = './assets/js/'; // Path to place the compiled JS vendors file.
var jsVendorFile = 'vendors'; // Compiled JS vendors file name.
// Default set to vendors i.e. vendors.js.

// JS Custom related.
var jsCustomSRC = './assets/js/custom/**/*.js'; // Path to JS custom scripts folder.
var jsCustomDestination = './assets/js/'; // Path to place the compiled JS custom scripts file.
var jsCustomFile = 'custom'; // Compiled JS custom file name.
// Default set to custom i.e. custom.js.

// Images related.
var imagesSRC = './assets/img/raw/**/*.{png,jpg,gif,svg}'; // Source folder of images which should be optimized.
var imagesDestination = './assets/img/'; // Destination folder of optimized images. Must be different from the imagesSRC folder.

// Watch files paths.
var styleWatchFiles = './assets/css/**/*.scss'; // Path to all *.scss files inside css folder and inside them.
var vendorJSWatchFiles = './assets/js/vendor/*.js'; // Path to all vendor JS files.
var customJSWatchFiles = './assets/js/custom/**/*.js'; // Path to all custom JS files.
var projectPHPWatchFiles = './**/*.php'; // Path to all PHP files.


// Browsers you care about for autoprefixing.
// Browserlist https        ://github.com/ai/browserslist
const AUTOPREFIXER_BROWSERS = [
    'last 2 version',
    '> 1%',
    'ie >= 9',
    'ie_mob >= 10',
    'ff >= 30',
    'chrome >= 34',
    'safari >= 7',
    'opera >= 23',
    'ios >= 7',
    'android >= 4',
    'bb >= 10'
];

// STOP Editing Project Variables.

/**
 * Load Plugins.
 *
 * Load gulp plugins and assing them semantic names.
 */
var gulp = require('gulp'); // Gulp of-course

// CSS related plugins.
var sass = require('gulp-sass'); // Gulp pluign for Sass compilation.
var minifycss = require('gulp-uglifycss'); // Minifies CSS files.
var autoprefixer = require('gulp-autoprefixer'); // Autoprefixing magic.
var mmq = require('gulp-merge-media-queries'); // Combine matching media queries into one media query definition.

// JS related plugins.
var concat = require('gulp-concat'); // Concatenates JS files
var uglify = require('gulp-uglify'); // Minifies JS files

// Image realted plugins.
var imagemin = require('gulp-imagemin'); // Minify PNG, JPEG, GIF and SVG images with imagemin.

// Utility related plugins.
var rename = require('gulp-rename'); // Renames files E.g. style.css -> style.min.css
var lineec = require('gulp-line-ending-corrector'); // Consistent Line Endings for non UNIX systems. Gulp Plugin for Line Ending Corrector (A utility that makes sure your files have consistent line endings)
var filter = require('gulp-filter'); // Enables you to work on a subset of the original files by filtering them using globbing.
var sourcemaps = require('gulp-sourcemaps'); // Maps code in a compressed file (E.g. style.css) back to it’s original position in a source file (E.g. structure.scss, which was later combined with other css files to generate style.css)
var notify = require('gulp-notify'); // Sends message notification to you
var browserSync = require('browser-sync').create(); // Reloads browser and injects CSS. Time-saving synchronised browser testing.
var reload = browserSync.reload; // For manual browser reload.
var wpPot = require('gulp-wp-pot'); // For generating the .pot file.
var sort = require('gulp-sort'); // Recommended to prevent unnecessary changes in pot-file.

/**
 * Task: `browser-sync`.
 *
 * Live Reloads, CSS injections, Localhost tunneling.
 *
 * This task does the following:
 *    1. Sets the project URL
 *    2. Sets inject CSS
 *    3. You may define a custom port
 *    4. You may want to stop the browser from openning automatically
 */
gulp.task('browser-sync', function() {
    browserSync.init({

        // For more options
        // @link http://www.browsersync.io/docs/options/

        // `true` Automatically open the browser with BrowserSync live server.
        // `false` Stop the browser from automatically opening.
        open: true,

        // Inject CSS changes.
        // Commnet it to reload browser for every CSS change.
        injectChanges: true,

        // Use a specific port (instead of the one auto-detected by Browsersync).
        // port: 7000,

        // FAB: Serve via https
        // https: true,
        proxy: projectURL,
        // proxy: "https://"+projectURL,
        // host: projectURL,
        // open: "external"

        ghostMode: {
            clicks: true,
            forms: true,
            scroll: true
        }
    });
});


/**
 * Task: `styles`.
 *
 * Compiles Sass, Autoprefixes it and Minifies CSS.
 *
 * This task does the following:
 *    1. Gets the source scss file
 *    2. Compiles Sass to CSS
 *    3. Writes Sourcemaps for it
 *    4. Autoprefixes it and generates style.css
 *    5. Renames the CSS file with suffix .min.css
 *    6. Minifies the CSS file and generates style.min.css
 *    7. Injects CSS or reloads the browser via browserSync
 */
gulp.task('styles', function() {
    gulp.src(styleSRC)
        .pipe(sourcemaps.init())
        .pipe(sass({
            errLogToConsole: true,
            outputStyle: 'compact',
            //outputStyle: 'compressed',
            // outputStyle: 'nested',
            // outputStyle: 'expanded',
            precision: 10
        }))
        .on('error', console.error.bind(console))
        .pipe(sourcemaps.write({
            includeContent: false
        }))
        .pipe(sourcemaps.init({
            loadMaps: true
        }))
        .pipe(autoprefixer(AUTOPREFIXER_BROWSERS))

        .pipe(sourcemaps.write(styleDestination))
        .pipe(lineec()) // Consistent Line Endings for non UNIX systems.
        .pipe(gulp.dest(styleDestination))

        .pipe(filter('**/*.css')) // Filtering stream to only css files
        .pipe(mmq({
            log: true
        })) // Merge Media Queries only for .min.css version.

        .pipe(browserSync.stream()) // Reloads style.css if that is enqueued.

        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(minifycss({
            maxLineLen: 10
        }))
        .pipe(lineec()) // Consistent Line Endings for non UNIX systems.
        .pipe(gulp.dest(styleDestination))

        .pipe(filter('**/*.css')) // Filtering stream to only css files
        .pipe(browserSync.stream()) // Reloads style.min.css if that is enqueued.
        .pipe(notify({
            message: 'TASK: "styles" Completed! 💯',
            onLast: true
        }))
});


/**
 * Task: `vendorJS`.
 *
 * Concatenate and uglify vendor JS scripts.
 *
 * This task does the following:
 *     1. Gets the source folder for JS vendor files
 *     2. Concatenates all the files and generates vendors.js
 *     3. Renames the JS file with suffix .min.js
 *     4. Uglifes/Minifies the JS file and generates vendors.min.js
 */
gulp.task('vendorsJs', function() {
    gulp.src(jsVendorSRC)
        .pipe(concat(jsVendorFile + '.js'))
        .pipe(lineec()) // Consistent Line Endings for non UNIX systems.
        .pipe(gulp.dest(jsVendorDestination))
        .pipe(rename({
            basename: jsVendorFile,
            suffix: '.min'
        }))
        .pipe(uglify())
        .pipe(lineec()) // Consistent Line Endings for non UNIX systems.
        .pipe(gulp.dest(jsVendorDestination))
        .pipe(notify({
            message: 'TASK: "vendorsJs" Completed! 💯',
            onLast: true
        }));
});


/**
 * Task: `customJS`.
 *
 * Concatenate and uglify custom JS scripts.
 *
 * This task does the following:
 *     1. Gets the source folder for JS custom files
 *     2. Concatenates all the files and generates custom.js
 *     3. Renames the JS file with suffix .min.js
 *     4. Uglifes/Minifies the JS file and generates custom.min.js
 */
gulp.task('customJS', function() {
    gulp.src(jsCustomSRC)
        .pipe(concat(jsCustomFile + '.js'))
        .pipe(lineec()) // Consistent Line Endings for non UNIX systems.
        .pipe(gulp.dest(jsCustomDestination))
        .pipe(rename({
            basename: jsCustomFile,
            suffix: '.min'
        }))
        .pipe(uglify())
        .pipe(lineec()) // Consistent Line Endings for non UNIX systems.
        .pipe(gulp.dest(jsCustomDestination))
        .pipe(notify({
            message: 'TASK: "customJs" Completed! 💯',
            onLast: true
        }));
});


/**
 * Task: `images`.
 *
 * Minifies PNG, JPEG, GIF and SVG images.
 *
 * This task does the following:
 *     1. Gets the source of images raw folder
 *     2. Minifies PNG, JPEG, GIF and SVG images
 *     3. Generates and saves the optimized images
 *
 * This task will run only once, if you want to run it
 * again, do it with the command `gulp images`.
 */
gulp.task('images', function() {
    gulp.src(imagesSRC)
        .pipe(imagemin({
            progressive: true,
            optimizationLevel: 3, // 0-7 low-high
            interlaced: true,
            svgoPlugins: [{
                removeViewBox: false
            }]
        }))
        .pipe(gulp.dest(imagesDestination))
        .pipe(notify({
            message: 'TASK: "images" Completed! 💯',
            onLast: true
        }));
});


/**
 * WP POT Translation File Generator.
 *
 * * This task does the following:
 *     1. Gets the source of all the PHP files
 *     2. Sort files in stream by path or any custom sort comparator
 *     3. Applies wpPot with the variable set at the top of this file
 *     4. Generate a .pot file of i18n that can be used for l10n to build .mo file
 */
gulp.task('translate', function() {
    return gulp.src(projectPHPWatchFiles)
        .pipe(sort())
        .pipe(wpPot({
            domain: text_domain,
            destFile: destFile,
            package: packageName,
            bugReport: bugReport,
            lastTranslator: lastTranslator,
            team: team
        }))
        .pipe(gulp.dest(translatePath))
        .pipe(notify({
            message: 'TASK: "translate" Completed! 💯',
            onLast: true
        }))

});


/**
 * Watch Tasks.
 *
 * Watches for file changes and runs specific tasks.
 */
gulp.task('default', ['styles', 'vendorsJs', 'customJS', 'images', 'browser-sync'], function() {
    gulp.watch(projectPHPWatchFiles, reload); // Reload on PHP file changes.
    gulp.watch(styleWatchFiles, ['styles']); // Reload on SCSS file changes.
    gulp.watch(vendorJSWatchFiles, ['vendorsJs', reload]); // Reload on vendorsJs file changes.
    gulp.watch(customJSWatchFiles, ['customJS', reload]); // Reload on customJS file changes.
});

How to include bower dependencies in vendor?

I am trying to add a dependency but appears this is not set up by default?

I tried adding:

var bower = require('gulp-bower'); // bower dependencies

and

 gulp.task('bower', function() {
  return bower({ directory: './js/vendor' })
 });

before the vendors task,
but nothing is being piped to vendors folder.
I changed my structure to gulp-dev folder outside the wp theme folder, which is otherwise working fine.

Including Browserify or alternatives?

I've been trying to get a Browserify-based workflow in place as an overwrite of the customJS task. However, after a lot of fiddling I've had it fail via the script never getting to BrowserSync.

Do you have any suggestions?

Incremental Builds and Caching + Gulp 4.0

• Update to Gulp 4.0
• Rebuild tasks to take advantage of caching.

This checklist will be updated as new or more detailed tasks become apparent.

☕️ Create Separate Config File

This is for the 2.0 branch. I'll knock this out ASAP as it will most likely effect other changes to the project.

• PR #66
• Formatting

Issue with reload

Hei there, I'm having the following issue:

when I change a style, the change gets injected but also triggers a browser refresh.

Did you manage to get CSS injection working?

Cheers!

🔬 ESLint + (optionally) Prettier Integration with WordPress Standards

ESLint helps linting the ECMAScript and Prettier is the best Opinionated Code Formatter as in it uses AST and rewrites everything from scratch addressing all the consistencies.

• ESLint configuration
• ESLint config for WordPress
• Prettier integration with ESLint + Spacing issue that is not compatible

Using Tunnel in the browser-synch function in gulpfile.js doesn't work

How can i make the tunnel options working using Browser-synch ?

I saw you had the same problem here : BrowserSync/browser-sync#978

The error i got is :

/Applications/MAMP/htdocs/CNM/wp-content/themes/cnm/node_modules/browser-sync/lib/browser-sync.js:665
bs.io.sockets.emit("file:reload", data);
^

TypeError: Cannot read property 'sockets' of undefined
at BrowserSync.doFileReload (/Applications/MAMP/htdocs/CNM/wp-content/themes/cnm/node_modules/browser-sync/lib/browser-sync.js:665:10)

Not updating SCSS after default event

This is a great resource! Thank you for the clean and documented code!!!

I have done the config and got it running. It builds fine when I run the default task, but does not rebuild or inject my styles when I save the .scss after that. No error, but no notification of task completion either.

Any thoughts?

Yeoman generator package - Enhancement

Juste wanted to share the idea of implementing a yeoman generator project pack for WPGulp. Could be created with an empty http://underscores.me/ project or using Bedrock and/or Sage from Roots.io ???

PROS:

• Faster environment setup for development.
• Configurable options (theme and gulpfile.js) directly from yeoman generator.

Use Clean CSS instead of UglifyCSS to keep first comment in style.min.css

Hello,

I've checked the uflifycss npm package and I can't find an option like keepspecialcomments in order to keep the theme info at the top in style.min.css, maybe using CleanCSS (https://www.npmjs.com/package/clean-css) would be an alternative.

I'm asking because maybe there are more reasons to use UglifyCSS instead of CleanCSS that I don't know.

How can I make browser-sync serve https without loosing updatability of the repo?

I need browser-sync to serve via https.
Can I just modify the gulpfile.js? Do you recommend updating wpgulp form time to time?

📚 Improved Image Caching

Cache images for the image task to only process the new images.

• PR by @marianrick #43
• Remove cached and remember
• Add gulp-cache
• Watch Image Files in the image source folder.

🛡 Improve Sass Task + Update NPM Modules

Sass task is broken and it breaks for simple errors. The new gulp-sass has better error handling. Moreover, the styles task is quite bulky and needs its dependencies to be updated as well.

• node-sass udpate
• Better Error handling for Sass
• Update related modules
• New configurable settings

browersync doens't load

great work !

Maybe I missed something in the tutorial, but browsersync open a new window : http://localhost:3000 and then loads forever. Any idea ?

thanks

Gulp 4 Rewrite

Hi @ahmadawais, awesome project!

With Gulp 4 coming soon, is there any thoughts to incorporating those features into WPGulp? I'd love to get started on it, but don't want to duplicate work that already may be being worked on (I saw another note that you're working a a pretty large overhaul).

Let me know!

Support for ES6

First of all, thank you for your amazing job! Everything just works out of the box with amazing performance. One thing I was considering having maybe is support for EcmaScript 6. Did you have this support in mind? Minifier now breaks, if you use new JS features and syntax.

No sass sourcemap here either

@ahmadawais As you recommended I try this repo with WPGulpTheme. I assumed because the gulpfile was more recent. Although, sass sourcemaps are being generated, they are not showing up inside Chrome devtools. A minified stylesheet is only being displayed. Screenshot

images task not moving all optimised images to imagesDestination

I've placed a bunch of images inside of assets/img/raw with the destination set to assets/img/optimised. Inside of raw there are some files inside of other directories. For some reason the task is completing but not all images are being copied into assets/img/optimised. Any ideas?

Just a fun suggestion. Add wapuu or WordPress logo to the notification.

Would look something like:

.pipe( notify( { message: 'TASK: "vendorsJs" Completed!', icon: "wapuu.png", onLast: true } ) );

I guess it wouldn't really make sense since it would add a file. Although could probably serve up an icon from outside the repo. Although this is meant to be a boilerplate it would be pretty neat.

Sourcemap for the minified css?

Is it possible to get sourcemap for the minified css? I tried adding .pipe(sourcemaps.write('./')) after .pipe(minifycss() but it doesn't generate the correct sourcemap :(

Suggestion: Separate source and build directories

Hi!

I have compared several gulp scripts and like this one best. However, it bothers me that it doesn't by default separate source and build directories. Have a look at this one which which has a build and a src folder: https://github.com/synapticism/wordpress-gulp-starter-kit

I think that it's much cleaner to have such a separation rather than having the gulpfile, node_modules, etc. in your theme folder. The same is true for scss files and javascripts. It's easy to accidentally edit the compiled file (especially when working collaboratively). Another problem is the removal of (uncompiled) source files for a release. I use wordmove, so I need to exclude all the dev-only files and directories to copy.

Instead I would like to suggest to have the dev version of the theme in a folder outside of the wordpress tree, for example in you home directory. The gulp file would have to move the files inside the theme folder in wp-content. This ensures that the files in the theme folder are always the ones that can go right on a server or a release.

What do you think?

Use of JS reserve words

package is a reserved word in JavaScript that might lead to unexpected errors/results.

Ref: https://github.com/ahmadawais/WPGulp/blob/master/gulpfile.js#L40

WP POT Support

I love gulp, use it for my plugin builds, and just found this repo.

In Popup Maker and its extensions we use gulp-wp-pot to automatically scan and update a translation.pot file.

I believe I got a few tips from your first guide for our routines, but mine have a few more things I have added for extra awesomeness.

A few things you could merge here would be

POT Langpack creation - Watcher on */.php
Automated Build Cycle (Ours uses the package.json data to copy build assets into a named directory and then zips with the current version number like popup-maker_v1.4.7.zip)

Also from testing, csso works better than uglifycss and why not include gulp-load-plugins and skip the declarations alltogether?

You can see our POT & build tasks here https://github.com/PopupMaker/Popup-Maker/blob/master/gulpfile.js#L72

[RESOLVED] Watch task too slow on init

Your gulpfile is awesome! Everything is running ok, but always when I run the task default, the watch task spend so much time to start (30s +- ).
There's some trick what can I do to speed up the watch task?
(Sorry about my poor english)

Gulp load Plugins

why not use the gulp-load-plugins?