gulp
फ़ाइल फ़िल्टर का उपयोग करना।

फ़ाइलें ऑर्डर करने के लिए छवियाँ, JS और CSS (SASS) नियम बनाना

गुलप और उनके कार्य स्थापित करना

$ npm install gulp --save-dev
$ npm install gulp-sass --save-dev
$ npm install gulp-uglify --save-dev
$ npm install gulp-imagemin --save-dev

फ़ोल्डर संरचना का निर्धारण

इस संरचना में, हम विकास उद्देश्यों के लिए ऐप फ़ोल्डर का उपयोग करेंगे, जबकि डिस्ट फ़ोल्डर का उपयोग उत्पादन साइट के लिए अनुकूलित फ़ाइलों को शामिल करने के लिए किया जाता है।

|-app
    |-css/
    |-images/
    |-index.html
    |-js/
    |-scss/
|- dist/
|- gulpfile.js
|- node_modules/
|- package.json

घूंघट प्रीप्रोसेसिंग

// Requires the gulp-sass plugin
var gulp = require('gulp'); 
    sass = require('gulp-sass');
    uglify = require('gulp-uglify');
    imagemin = require('gulp-imagemin');

गल्प टास्क

gulp.task('sass', function(){
  return gulp.src('app/scss/**/*.scss') //selection all files in this derectory
    .pipe(sass()) // Using gulp-sass
    .pipe(gulp.dest('dist'))
});
gulp.task('gulp-uglify', function(){
  return gulp.src('app/js/*.js')
    // Minifies only if it's a JavaScript file
    .pipe(uglify())
    .pipe(gulp.dest('dist'))
});
gulp.task('images', function(){
  return gulp.src('app/images/**/*.+(png|jpg|gif|svg)')
  .pipe(imagemin())
  .pipe(gulp.dest('dist/images'))
});

गुल्प घड़ी

gulp.task('watch', function(){
  gulp.watch('app/js/**/*.js', ['gulp-uglify']); 
    gulp.watch('app/scss/**/*.scss', ['sass']);
    gulp.watch('app/images/**/*.*', ['images']);  
  // Other watchers
});
gulp.task('build', [`sass`, `gulp-uglify`, `images`], function (){
  console.log('Building files');
});
gulp.task('default', function() {});