Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor gulpfile to be more dynamic #6625

Merged
merged 9 commits into from
May 29, 2024
Merged

Refactor gulpfile to be more dynamic #6625

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9cf35b3
start refactoring gulpfile and divide it into smaller modules and be …
wordpressfan May 9, 2024
6d206a5
[WIP] save current work
wordpressfan May 13, 2024
3ce3a06
finalize css tasks and start in js tasks
wordpressfan May 16, 2024
c678e66
[WIP] before changing anything in sourcemaps
wordpressfan May 17, 2024
88b9d45
finalize js gulp tasks
wordpressfan May 20, 2024
a8e8fea
add some scripts to the package.json
wordpressfan May 21, 2024
a14896b
fix build:sass:all task
wordpressfan May 28, 2024
0684c5d
add gulp tasks inside gulpfile as a comment (documentation)
wordpressfan May 29, 2024
51ef5a1
update readme file also
wordpressfan May 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,24 @@ To be able to validate your license and use the plugin, you will also have to ma
- `WP_ROCKET_EMAIL` which is the email for your WP Rocket account
- `WP_ROCKET_KEY` which is your API Key

## Gulp Tasks

| Command | Description |
|---------------------------------|:------------------------------------------------------------------------------------------------------------:|
| **CSS Tasks** | |
| `gulp build:saas:unmin` | Builds Full admin CSS, the unminified version (wpr-admin.css) |
| `gulp build:saas:min` | Builds Full admin CSS, the minified version (wpr-admin.min.css) |
| `gulp build:sass:all` | Builds all admin CSS files (wpr-admin.css, wpr-admin.min.css, wpr-admin-rtl.css, wpr-admin-rtl.min.css) |
| `gulp sass:watch` | Watches all admin CSS files mentioned above and builds them again with any change. |
| **JS Tasks** | |
| `gulp build:js:app:unmin` | Builds admin app js file, the unminified version (wpr-admin.js) |
| `gulp build:js:app:min` | Builds admin app js file, the minified version (wpr-admin.min.js) |
| `gulp build:js:lazyloadcss:min` | Builds lazyload CSS js file, the minified version (lazyload-css.min.js) |
| `gulp build:js:lcp:min` | Builds lcp beacon script, the minified version (lcp-beacon.min.js) |
| `gulp build:js:all` | Builds all js files mentioned above (wpr-admin.js, wpr-admin.min.js, lazyload-css.min.js, lcp-beacon.min.js) |
| `gulp js:watch` | Watches all js files changes and build them again with any change. |


## Support

Need help with something? Open a [ticket](https://wp-rocket.me/support/?utm_source=github&utm_medium=wp_rocket_profile) and we will be happy to help you out!
Expand Down
296 changes: 23 additions & 273 deletions gulpfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,274 +1,24 @@
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var browserify = require('browserify');
var watchify = require('watchify');
var babel = require('babelify');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass')(require('sass'));
var rename = require("gulp-rename");
var iife = require('gulp-iife');

// Compile sass admin
const compile_sass_admin = (name, minify = false) => {
return gulp.src('./src/scss/main.scss')
.pipe(sass({outputStyle: minify ? 'compressed': 'expanded'}).on('error', sass.logError))
.pipe(rename(name))
.pipe(gulp.dest('assets/css'));
}

// Compile sass_rtl
const compile_sass_rtl = (name, minify = false) => {
return gulp.src('./src/scss/rtl.scss')
.pipe(sass({outputStyle: minify ? 'compressed': 'expanded'}).on('error', sass.logError))
.pipe(rename(name))
.pipe(gulp.dest('assets/css'));
}

const build_sass_admin_unmin = () => {
return compile_sass_admin('wpr-admin.css');
}
const build_sass_rtl_unmin = () => {
return compile_sass_rtl('wpr-admin-rtl.css');
}

gulp.task('sass_all_unmin', gulp.parallel(build_sass_admin_unmin, build_sass_rtl_unmin));

const sassWatchUnmin = () => {
// Init compilation before gulp starts watching...
compile_sass_admin('wpr-admin.css');
compile_sass_rtl('wpr-admin-rtl.css');

// Start watching for changes...
gulp.watch('./src/scss/**/*.scss', gulp.series('sass_all_unmin'));
}

// Compile without minification.
const compileWithoutMinify = () => {
var bundler = watchify(browserify('./src/js/global/app.js', {debug: true}).transform(babel));

// Admin JS
var rebundle = () => {
var isSuccess = true;
bundler.bundle()
.on('error', function (err) {
console.error(err);
isSuccess = false;
this.emit('end');
})
.pipe(source('wpr-admin.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: false}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('assets/js'))
.on('end', function() {
if( isSuccess )console.log('Bundled without minification!');
})
}

bundler.on('update', function () {
console.log('-> bundling...');
rebundle();
});

rebundle();
}

// Run `bundle:unminify` to bundle unminified assets.
gulp.task('bundle:unminify', gulp.parallel(compileWithoutMinify, sassWatchUnmin));


/* Task to compile sass admin */
const sass_admin = () => {
return compile_sass_admin('wpr-admin.min.css', true);
}

const sass_rtl = () => {
return compile_sass_rtl('wpr-admin-rtl.min.css', true);
}

gulp.task('sass_all', gulp.parallel(sass_admin, sass_rtl));

function sassWatch() {
// Init compilation before gulp starts watching...
compile_sass_admin('wpr-admin.min.css', true);
compile_sass_rtl('wpr-admin-rtl.min.css', true);

gulp.watch('./src/scss/**/*.scss', gulp.series('sass_all'));
}

/* Task to watch sass changes */
gulp.task('sass:watch', sassWatch);


/* Task to compile JS */
function compile(watch) {
var bundler = watchify(browserify('./src/js/global/app.js', {debug: true}).transform(babel));

// Admin JS
function rebundle() {
var isSuccess = true;
bundler.bundle()
.on('error', function (err) {
console.error(err);
isSuccess = false;
this.emit('end');
})
.pipe(source('wpr-admin.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(sourcemaps.init({loadMaps: false}))
.pipe(sourcemaps.write('./'))
.pipe( rename( { suffix: '.min' } ) )
.pipe(gulp.dest('assets/js'))
.on('end', function() {
if( isSuccess )console.log('Yay success!');
})
}

if (watch) {
bundler.on('update', function () {
console.log('-> bundling...');
rebundle();
});
}

rebundle();
}

function watch() {
return compile(true);
};

gulp.task('build', function () {
return compile();
});
gulp.task('watch', function () {
return watch();
});

gulp.task('default', gulp.parallel('watch', 'sass:watch', 'bundle:unminify'));

/** Tasks for deployment */
const build_sass_admin = () => {
return compile_sass_admin('wpr-admin.min.css', true);

}
const build_sass_rtl = () => {
return compile_sass_rtl('wpr-admin-rtl.min.css', true);
}

gulp.task('run:build:sass', gulp.parallel(build_sass_admin, build_sass_rtl));

// Bundle script without watching.
const bundleJsWithoutWatch = () => {
var bundle = browserify({
entries: './src/js/global/app.js',
debug: true
}).transform(babel);

return bundle.bundle()
.pipe(source('wpr-admin.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(sourcemaps.init({loadMaps: false}))
.pipe(sourcemaps.write('./'))
.pipe( rename( { suffix: '.min' } ) )
.pipe(gulp.dest('assets/js'))
}

// Bundle script without watching.
const bundleLazyloadJsWithoutWatch = () => {
var bundle = browserify({
entries: './src/js/global/lazyload-css.js',
debug: true
}).transform(babel);

return bundle.bundle()
.pipe(source('lazyload-css.js'))
.pipe(buffer())
.pipe(uglify())
.pipe( rename( { suffix: '.min' } ) )
.pipe(sourcemaps.init({loadMaps: false}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('assets/js'))
}

const bundleLcpBeaconWithoutWatch = () => {
var bundle = browserify({
entries: './assets/js/lcp-beacon.js',
debug: true
}).transform(babel);

return bundle.bundle()
.pipe(source('lcp-beacon.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(sourcemaps.init({loadMaps: false}))
.pipe(sourcemaps.write('./'))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('assets/js'));
}

exports.bundleLazyloadJsWithoutWatch = bundleLazyloadJsWithoutWatch;

// Run build without watching: watching keeps git actions stuck on 'build'
gulp.task('run:build', gulp.parallel(bundleJsWithoutWatch, bundleLazyloadJsWithoutWatch, bundleLcpBeaconWithoutWatch, 'run:build:sass'));
/**
* Compiles a standalone script file.
*
* Command line: gulp js:compile_single --script=script-name.js [optional --mangle=true, --iife=true]
const requireDir = require('require-dir');
// Require all tasks.
requireDir('./src/js/gulp/tasks', { recurse: true });

/*
* List of gulp tasks:
*
* CSS Tasks:
*
* gulp build:saas:unmin => Builds Full admin CSS, the unminified version (wpr-admin.css)
* gulp build:saas:min => Builds Full admin CSS, the minified version (wpr-admin.min.css)
* gulp build:sass:all => Builds all admin CSS files (wpr-admin.css, wpr-admin.min.css, wpr-admin-rtl.css, wpr-admin-rtl.min.css)
* gulp sass:watch => Watches all admin CSS files mentioned above and builds them again with any change.
*
* JS Tasks:
*
* gulp build:js:app:unmin => Builds admin app js file, the unminified version (wpr-admin.js)
* gulp build:js:app:min => Builds admin app js file, the minified version (wpr-admin.min.js)
* gulp build:js:lazyloadcss:min => Builds lazyload CSS js file, the minified version (lazyload-css.min.js)
* gulp build:js:lcp:min => Builds lcp beacon script, the minified version (lcp-beacon.min.js)
* gulp build:js:all => Builds all js files mentioned above (wpr-admin.js, wpr-admin.min.js, lazyload-css.min.js, lcp-beacon.min.js)
* gulp js:watch => Watches all js files changes and build them again with any change.
*
*/
gulp.task('js:compile_single', () => {
const {argv} = require("yargs");
const transpile = require('gulp-babel');
const source = './assets/js/' + argv.script;
const mangle = 'mangle' in argv && argv.mangle
? {
toplevel: true,

}
: false;
const iife_status = 'iife' in argv && argv.iife;

let stream = gulp.src( source )
// Transpile newer JS for cross-browser support.
.pipe( transpile({
presets: [
[
'env',
{
'targets': {
'browsers': [ 'last 2 versions' ]
}
}
]
]
}))
// Minify the script.
.pipe( uglify({
compress: {
sequences: true,
dead_code: true,
conditionals: true,
booleans: true,
unused: true,
if_return: true,
join_vars: true,
drop_console: true
},
mangle: mangle
} ) );
//apply iife
if ( iife_status ) {
stream = stream.pipe( iife({useStrict: false, prependSemicolon: false}) );
}
stream = stream
// Rename the .js to .min.js.
.pipe( rename( { suffix: '.min' } ) )
// Write out the script to the configured <filename>.min.js destination.
.pipe( gulp.dest( './assets/js/' ) );

return stream;
});
Loading
Loading