Fișă de referință pentru sistemul de build Gulp.js

Gulp este un sistem de execuție bazat pe fluxuri pentru Node.js care automatizează fluxurile de lucru și transformarea resurselor.

Module populare (Common Plugins)

• gulp-sass: SASS / SCSS compiler
• gulp-autoprefixer: Prefix CSS with vendor properties
• gulp-clean-css: CSS minifier
• gulp-jshint / gulp-eslint: JavaScript linter
• gulp-concat: Concatenate files into single bundles
• gulp-uglify: JavaScript minifier
• gulp-imagemin: Optimize image files
• gulp-rename: Rename files with prefixes or suffixes
• gulp-notify: Desktop notifications on build completion

---

Exemplu complet de gulpfile.js

// gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const jshint = require('gulp-jshint');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const concat = require('gulp-concat');

// Styles Task: Compile SCSS, Autoprefix, Minify
gulp.task('styles', function () {
  return gulp.src('src/styles/main.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({ overrideBrowserslist: ['last 2 versions'] }))
    .pipe(gulp.dest('dist/styles'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist/styles'));
});

// Scripts Task: Lint, Concatenate, Uglify
gulp.task('scripts', function () {
  return gulp.src('src/scripts/**/*.js')
    .pipe(jshint())
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/scripts'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'));
});

// Watch & Default Task
gulp.task('watch', function () {
  gulp.watch('src/styles/**/*.scss', gulp.series('styles'));
  gulp.watch('src/scripts/**/*.js', gulp.series('scripts'));
});

gulp.task('default', gulp.parallel('styles', 'scripts'));

---

Fișe de referință conexe

• Rollup.js
• Sass
• package.json