Simple and plain gulpfile.js boilerplate for project using SASS and Browserify

browserify-shim-for-package.json

"browser": {
    "jquery": "./bower_components/jquery/dist/jquery.js"
},
"browserify-shim": {
    "jquery": "$"
},
"browserify": {
    "transform": [
        "browserify-shim"
    ]
},

ES6-browserify-2017.js

/*
```
npm install browser-sync gulp gulp-autoprefixer gulp-cssnano gulp-rename gulp-sass gulp-uglify gulp-watch vinyl-source-stream babelify browserify browserify-shim babel-preset-es2015 babel-core --save-dev
```

```
npm install jquery --save 
npm install foundation-sites --save 
```
*/

// gulpfile.js

const gulp         = require('gulp');
const browserSync  = require('browser-sync').create();
const reload       = browserSync.reload;
const sass         = require('gulp-sass');
const uglify       = require('gulp-uglify');
const rename       = require('gulp-rename');
const cssnano      = require('gulp-cssnano');
const watch        = require('gulp-watch');
const autoprefixer = require('gulp-autoprefixer');
const babelify     = require('babelify');
const source       = require('vinyl-source-stream');
const browserify   = require('browserify');

let config = {
    sass: {
        source: './asset_sources/sass/style.scss',
        dist: './assets/css',
        fileName: 'style.css',
        minifiedFileName: 'style.min.css',
        watch: './asset_sources/sass/**/*.scss'
    },
    js: {
        source: './asset_sources/js/app.js',
        dist: './assets/js',
        fileName: 'app.js',
        minifiedFileName: 'app.min.js',
        watch: './asset_sources/js/**/*.js'
    },
    image: {
        source: './asset_sources/images/*',
        dist: './assets/images'
    },
    sync: {
        server: true
    }
};
// https://www.browsersync.io/docs/options/


// sass to css
gulp.task('sass', function () {
    gulp.src(config.sass.source)
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest(config.sass.dist))
        .pipe(browserSync.stream());
});

// browserify
gulp.task('js', function() {
    return browserify({ entries: [config.js.source] })
        .transform(babelify, {presets: ['es2015']}) // "es2015", "react"
        .bundle()
        .pipe(source(config.js.fileName))
        .pipe(gulp.dest(config.js.dist))
        .pipe(browserSync.stream());
});

// default task and watch
gulp.task('watch', ['sass', 'js'], function() {
    browserSync.init(config.sync);

    watch(config.sass.watch, function(){
        gulp.start('sass');
    });

    watch(config.js.watch, function(){
        gulp.start('js');
    });

    watch(['./*.html', './**/*.php'], function(){
        reload();
    });
});

// default task
gulp.task('default', ['watch']);

// gulp build and minify things
gulp.task('production', ['sass', 'js'], function(){
    gulp.src(config.js.dist + '/' + config.js.fileName)
        .pipe(uglify())
        .pipe(rename(config.js.minifiedFileName))
        .pipe(gulp.dest(config.js.dist));

    gulp.src(config.sass.dist + '/' + config.sass.fileName)
        .pipe(cssnano())
        .pipe(rename(config.sass.minifiedFileName))
        .pipe(gulp.dest(config.sass.dist));
});


// gulp watch
// gulp production

es6-webpack.js

// npm install babel-preset-es2015 browser-sync gulp gulp-autoprefixer gulp-cssnano gulp-rename gulp-sass gulp-uglify gulp-watch babel-loader babel-core babel-preset-env webpack webpack-stream --save-dev


const gulp         = require('gulp');
const browserSync  = require('browser-sync').create();
const reload       = browserSync.reload;
const sass         = require('gulp-sass');
const webpack      = require('webpack-stream');
const uglify       = require('gulp-uglify');
const rename       = require('gulp-rename');
const cssnano      = require('gulp-cssnano');
const watch        = require('gulp-watch');
const autoprefixer = require('gulp-autoprefixer');

let config = {
    sass: {
        source: './asset_sources/sass/style.scss',
        dist: './assets/css',
        fileName: 'style.css',
        minifiedFileName: 'style.min.css',
        watch: './asset_sources/sass/**/*.scss'
    },
    js: {
        source: './asset_sources/js/app.js',
        dist: './assets/js',
        fileName: 'app.js',
        minifiedFileName: 'app.min.js',
        watch: './asset_sources/js/**/*.js'
    },
    image: {
        source: './asset_sources/images/*',
        dist: './assets/images'
    },
    sync: {
        server: true
    }
};
// https://www.browsersync.io/docs/options/


// sass to css
gulp.task('sass', function () {
    gulp.src(config.sass.source)
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest(config.sass.dist))
        .pipe(browserSync.stream());
});

// browserify
gulp.task('js', function() {
    return gulp.src(config.js.source)
        .pipe(webpack({
            module: {
                rules: [{
                    test: /\.js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['env']
                        }
                    }
                }]
            },
            output: {
                filename: config.js.fileName,
            }
        }))
        .pipe(gulp.dest(config.js.dist))
        .pipe(browserSync.stream());
});

// default task and watch
gulp.task('watch', ['sass', 'js'], function() {
    browserSync.init(config.sync);

    watch(config.sass.watch, function(){
        gulp.start('sass');
    });

    watch(config.js.watch, function(){
        gulp.start('js');
    });

    watch(['./*.html', './**/*.php'], function(){
        reload();
    });
});

// default task
gulp.task('default', ['watch']);

// gulp build and minify things
gulp.task('production', ['sass', 'js'], function(){
    gulp.src(config.js.dist + '/' + config.js.fileName)
        .pipe(uglify())
        .pipe(rename(config.js.minifiedFileName))
        .pipe(gulp.dest(config.js.dist));

    gulp.src(config.sass.dist + '/' + config.sass.fileName)
        .pipe(cssnano())
        .pipe(rename(config.sass.minifiedFileName))
        .pipe(gulp.dest(config.sass.dist));
});

gulpfile for react.js

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var reload      = browserSync.reload;
var sass        = require('gulp-sass');
var source      = require('vinyl-source-stream');
var browserify  = require('browserify');
var jshint      = require('gulp-jshint');

var uglify      = require('gulp-uglify');
var rename      = require('gulp-rename');
var cssnano     = require('gulp-cssnano');
// var buffer   = require('vinyl-buffer'); // .pipe(buffer()) use buffer if you want to uglify JS on browserify on fly event

var watch = require('gulp-watch');
var babelify = require("babelify");

var config = {
    sass: {
        source: './assets_source/sass/style.scss',
        dist: './assets/css',
        fileName: 'style.css',
        minifiedFileName: 'style.min.css',
        watch: './assets_source/sass/**/*.scss'
    },
    js: {
        source: './assets_source/browserify/main.js',
        dist: './assets/js',
        fileName: 'main.js',
        minifiedFileName: 'main.min.js',
        watch: './assets_source/browserify/**/*.js'
    },
    sync: {
        server: {
            baseDir: "./"
        }
    }
};


// sass to css
gulp.task('sass', function () {
    gulp.src(config.sass.source)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(config.sass.dist))
        .pipe(browserSync.stream());
});

// browserify
gulp.task('browserify', function() {
    return browserify({ entries: [config.js.source] })
        .transform(babelify, {presets: ["react"]}) // "es2015", "react"
        .bundle()
        .pipe(source(config.js.fileName))
        .pipe(gulp.dest(config.js.dist))
        .pipe(browserSync.stream());
});

// jshint
gulp.task('jshint', function() {
    return gulp.src(config.js.watch)
        .pipe(jshint('.jshintrc'))
        .pipe(jshint.reporter('default'));
});

// default task adn watch
gulp.task('serve', ['sass', 'browserify', 'jshint'], function() {
    browserSync.init(config.sync);

    watch(config.sass.watch, function(){
        gulp.start('sass');
    });
    watch(config.js.watch, function(){
        gulp.start('browserify');
    });
    watch('./*.html', function(){
        reload();
    });
});

// default task
gulp.task('default', ['serve']);

// gulp build and minify things
gulp.task('build', ['sass', 'browserify', 'jshint'], function(){
    gulp.src(config.js.dist + '/' + config.js.fileName)
        .pipe(uglify())
        .pipe(rename(config.js.minifiedFileName))
        .pipe(gulp.dest(config.js.dist));

    gulp.src(config.sass.dist + '/' + config.sass.fileName)
        .pipe(cssnano())
        .pipe(rename(config.sass.minifiedFileName))
        .pipe(gulp.dest(config.sass.dist));
});

gulpfile.js

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var reload      = browserSync.reload;
var sass        = require('gulp-sass');
var source      = require('vinyl-source-stream');
var browserify  = require('browserify');
var jshint      = require('gulp-jshint');
var uglify      = require('gulp-uglify');
var rename      = require('gulp-rename');
var cssnano     = require('gulp-cssnano');
// var buffer   = require('vinyl-buffer'); // .pipe(buffer()) use buffer if you want to uglify JS on browserify on fly event
var watch = require('gulp-watch');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var autoprefixer = require('gulp-autoprefixer');

var config = {
    sass: {
        source: './assets_source/sass/style.scss',
        dist: './assets/css',
        fileName: 'style.css',
        minifiedFileName: 'style.min.css',
        watch: './assets_source/sass/**/*.scss'
    },
    js: {
        source: './assets_source/browserify/main.js',
        dist: './assets/js',
        fileName: 'main.js',
        minifiedFileName: 'main.min.js',
        watch: './assets_source/browserify/**/*.js'
    },
    image: {
        source: './assets_source/images/*',
        dist: './assets/images'
    },
    sync: {
        proxy: 'offer.anypage.dev'
    }
};
// https://www.browsersync.io/docs/options/


// sass to css
gulp.task('sass', function () {
    gulp.src(config.sass.source)
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest(config.sass.dist))
        .pipe(browserSync.stream());
});

// browserify
gulp.task('browserify', function() {
    return browserify({ entries: [config.js.source] })
        .bundle()
        .pipe(source(config.js.fileName))
        .pipe(gulp.dest(config.js.dist))
        .pipe(browserSync.stream());
});

// jslint
gulp.task('lint', function() {
    return gulp.src(config.js.watch)
        .pipe(jshint('.jshintrc'))
        .pipe(jshint.reporter('default'));
});

// image min
gulp.task('imagemin', function() {
    return gulp.src(config.image.source)
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))
        .pipe(gulp.dest(config.image.dist));
});

// default task adn watch
gulp.task('serve', ['sass', 'browserify', 'lint'], function() {
    browserSync.init(config.sync);

    watch(config.sass.watch, function(){
        gulp.start('sass');
    });
    watch(config.js.watch, function(){
        gulp.start('browserify');
    });
    watch('./*.html', function(){
        reload();
    });
    // watch(config.image.source, function(){
    //     gulp.start('imagemin');
    //     reload();
    // });
});

// default task
gulp.task('default', ['serve']);

// gulp build and minify things
gulp.task('build', ['sass', 'browserify', 'lint', 'imagemin'], function(){
    gulp.src(config.js.dist + '/' + config.js.fileName)
        .pipe(uglify())
        .pipe(rename(config.js.minifiedFileName))
        .pipe(gulp.dest(config.js.dist));

    gulp.src(config.sass.dist + '/' + config.sass.fileName)
        .pipe(cssnano())
        .pipe(rename(config.sass.minifiedFileName))
        .pipe(gulp.dest(config.sass.dist));
});

npm-command.md

npm install browser-sync browserify browserify-shim gulp gulp-cssnano gulp-jshint gulp-rename gulp-sass gulp-streamify gulp-uglify gulp-watch vinyl-source-stream gulp-imagemin imagemin-pngquant gulp-autoprefixer --save-dev

package json for react

{
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "browser": {},
  "browserify-shim": {},
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babelify": "^7.2.0",
    "browser-sync": "^2.11.1",
    "browserify": "^13.0.0",
    "browserify-shim": "^3.8.12",
    "gulp": "^3.9.0",
    "gulp-cssnano": "^2.1.0",
    "gulp-jshint": "^2.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.1.1",
    "gulp-streamify": "^1.0.2",
    "gulp-uglify": "^1.5.1",
    "gulp-watch": "^4.3.5",
    "jshint": "^2.9.1",
    "vinyl-source-stream": "^1.1.0"
  },
  "dependencies": {
    "jquery": "^2.2.0",
    "react": "^0.14.6",
    "react-dom": "^0.14.6"
  }
}