How to configure Magento2 with Gulp instead Grunt. Anyone have idea ?
6 Answers
I personally use this simple gulpfile.js to process my css to the pub folders.
// Load gulp and plug-ins
var gulp = require('gulp'),
jshint = require('gulp-jshint'),
less = require('gulp-less'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
gutil = require('gulp-util'),
livereload = require('gulp-livereload'),
sourcemaps = require('gulp-sourcemaps');
// Generate less to CSS.
gulp.task('less', function() {
return gulp.src(['app/design/frontend/Vendor/theme/web/css/theme.less'])
.pipe(less())
.pipe( sourcemaps.write() )
.pipe( livereload() )
.pipe(gulp.dest('pub/static/frontend/Vendor/theme/nl_NL/css'))
.pipe(gulp.dest('pub/static/frontend/Vendor/theme/de_DE/css'))
});
// Watch Files For Changes and livereload
gulp.task('watch', function() {
livereload.listen();
gulp.watch('app/design/frontend/Vendor/theme/web/css/**/*.less', ['less']);
});
gulp.task('default', ['less']);
-
-
-
Sorry I meant what about for JS files? This is really good BTW Apr 2, 2017 at 9:29
-
-
I suggest to try SnowdogApps/magento2-frontools
With this you have gulp and also sass support
-
-
-
1That means missing out on new features and bug fixes, not an ideal solution. Jun 1, 2017 at 15:46
there is an ongoing discussion in including gulp to magento2 here: https://github.com/magento/magento2/issues/2104
alen kent also wrote a blog post on how to integrate it in the current release: http://alankent.me/2016/01/27/gulp-et-al-in-magento-2/
I think the process will be still much enhanced for fe developers since many parts of the frontend workflow are pretty hard to change currently. I hope and think magento2 will be more flexibel with this in the future like it is in most cases for the backend development.
-
That links are very informative. Thanks for sharing boss ! Nov 1, 2017 at 13:33
some step :
- apt-get install nodejs and tape ln -s /usr/bin/nodejs /usr/bin/node
- go to root prject and : apt-get install npm
- npm install --global gulp-cli and tape npm install --save-dev gulp
- donwload gulp.js from https://github.com/poddubny/magento2-gulp => npm install gulp-less npm install gulp-sourcemaps npm install gulp-cssmin npm install gulp-livereload npm install gulp-if npm install -g graceful-fs
- bin/magento dev:source-theme:deploy --locale="en_US" --area="frontend" --theme="Ibnab/Salam"
- php bin/magento setup:static-content:deploy
the complete video tutorials is here : http://www.ibnab.com/en/blog/magento-2/magento-2-video-introduction-for-using-gulp-in-frontend
-
Hi inab do you have the script the repo is not there anymore Nov 7, 2017 at 11:41
-
I use this to compile LESS locally.
// Load gulp and plug-ins
var gulp = require('gulp'),
less = require('gulp-less'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
gutil = require('gulp-util'),
sourcemaps = require('gulp-sourcemaps');
function styles_l() {
return gulp.src('frontend/Magento/blank/web/css/styles-l.less')
.pipe(sourcemaps.init())
.pipe(less())
.pipe(sourcemaps.write('/maps'))
.pipe(gulp.dest('pub/static/frontend/Magento/blank/en_US/css'));
}
function styles_m() {
return gulp.src('frontend/Magento/blank/web/css/styles-m.less')
.pipe(sourcemaps.init())
.pipe(less())
.pipe(sourcemaps.write('/maps'))
.pipe(gulp.dest('pub/static/frontend/Magento/blank/en_US/css'));
}
function watch() {
gulp.watch('frontend/Magento/blank/web/css/**/*.less', styles_l);
}
var build = gulp.series(gulp.parallel(styles_l,styles_m));
exports.watch = watch;
exports.default = build;
If you are looking for something that stays with core magento style and structures, our team has developed this magento-2-gulp that supports:
- default magento 2 project structure with theme config inside
dev/tools/grunt/configs/themes.js
- installation with
composer
.less
browsersync
andliverreload
- compiling es6+ with
Babel
- creating
svg
sprites