JSFiddle - React, Tailwind, and code Playground

by big_smile

JavaScript

var gulp            = require('gulp'),
    sass            = require('gulp-ruby-sass'),
    autoprefixer    = require('gulp-autoprefixer'),
    minifycss       = require('gulp-minify-css'),
    jshint          = require('gulp-jshint'),
    uglify          = require('gulp-uglify'),
    imagemin        = require('gulp-imagemin'),
    rename          = require('gulp-rename'),
    concat          = require('gulp-concat'),
    notify          = require('gulp-notify'),
    cache           = require('gulp-cache'),
    livereload      = require('gulp-livereload'),
    plumber         = require('gulp-plumber'),
    del             = require('del');


 

//Scripts Task
gulp.task('scripts', function() {
    gulp.src('frontend/build/js/*.js')
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('frontend/dist/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('frontend/dist/scripts'))
       .pipe(notify({ // Add gulpif here
           sound: "Frog"
    }));
});


//Styles Task
gulp.task('styles', function() {
    
  var onError = function(err) {
        notify.onError({
                    title:    "Gulp",
                    subtitle: "Failure!",
                    message:  "Error: <%= error.message %>",
                    sound:    "Beep"
                })(err);

        this.emit('end');
         };
    

    return sass('frontend/build/scss/', {style: 'expanded'})
    .pipe(plumber({errorHandler: onError}))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(gulp.dest('frontend/dist/css/'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/styles'))
    .pipe(notify({ // Add gulpif here
           sound: "Pop"
    }));


});


//Image Task
gulp.task('images', function() {
    gulp.src('frontend/images/*').pipe(cache(imagemin({optimizationLevel: 3, progressive: true, interlaced: true})))
    .pipe(gulp.dest('frontend/images/'));
})


//...