Gulp - letronghieu4897/magento GitHub Wiki

Gulp

Gulp

  • 1. Install
  • 2. Create gulpfile.js

1. Install

$ npm install gulp-cli -g
$ npm install gulp -D
$ npx -p touch nodetouch gulpfile.js
$ gulp --help
--------------------------------------
$ npm init  : Create a package.json
--------------------------------------
npm install --save-dev gulp : Install gulp package

2. Create gulpfile.js

THIS IS FOR SCSS

var gulp = require('gulp');
var sass = require('gulp-sass');

//style paths
var sassFiles = 'styles/**/*.scss',
    cssDest = 'styles/css/';

gulp.task('styles', function(){
    gulp.src(sassFiles)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(cssDest));
});

gulp.task('watch',function() {
    gulp.watch(sassFiles,gulp.series('styles'));
});
NODE
gulp 3.x.x 

gulp.task('watch', function() {
  gulp.watch('app/css/*.css', ['styles']);
  gulp.watch('app/js/*.js', ['scripts']);
  gulp.watch('app/img/*', ['images']);
});


gulp 4.x.x 

gulp.task('watch', function() {
  gulp.watch('app/css/*.css', gulp.series('styles'));
  gulp.watch('app/js/*.js', gulp.series('scripts'));
  gulp.watch('app/img/*', gulp.series('images'));
});
1. Install module sass to combine scss/sass 

2. Run gulp : npm run gulp --tasks

3. Run gulp watch : npm run gulp watch