Using Less {less}
WordPress MVC (WPMVC) flexibility allows developers to freely used the style language of their choice.
This article will describe shortly how to configure your WordPress MVC project to work with {less}.
Step 1: Install dependencies
The following command will install gulp-less
package in your project and save it as dependency:
npm install gulp-less --save
Step 2: Modify gulpfile.js
You need to modify your gulpfile.js
in order to register gulp-less
and to add custom tasks for less compilations.
Require less
At the beginning of the file add this line:
var less = require('gulp-less');
The line above, will make sure gulp-less
is registered and loaded.
Custom tasks
You will create two tasks:
- less: This task will compile less files.
- watch-less: This task will allow you to set up a watch for easier development.
The less
task needs to be included in WordPress MVC compilation cycle. To do this, we will modify the configuration’s prestyles
step, to make sure your custom task is included.
// -------------- // START - CUSTOM TASKS // Add less to prestyles - WordPress MVC cycle config.prestyles = ['sass', 'less'];
The modification above indicates that sass
and less
should be required in order to compile styles. This will enable WPMVC cycle to compile either of the two languages.
Following the line above, add the following:
// less task gulp.task('less', function () { return gulp.src('./assets/raw/less/*.less') .pipe(less()) .pipe(gulp.dest('./assets/css')); }); // watch-less task gulp.task('watch-less', async function() { gulp.watch([ './assets/raw/less/**/*.less', ], gulp.series('less')); });
The snippet above will add tasks less
and watch-less
.
Step 3: Compile
With gulpfile.js
modified, you can compile your less assets, located in the path [project]/assets/raw/less
, by running the command:
gulp dev
Less compilation will also be included when building or deploying the project.
You can watch any file changes running the command:
gulp watch-less