Skip to content

Instantly share code, notes, and snippets.

@marceloogeda

marceloogeda/gulpfile.babel.js

Last active December 6, 2022 17:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save marceloogeda/5a449caa50462ab2667540a93d34009f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save marceloogeda/5a449caa50462ab2667540a93d34009f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. marceloogeda revised this gist Jun 2, 2016. 1 changed file with 26 additions and 0 deletions.
    26 changes: 26 additions & 0 deletions package.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    {
    ...
    "devDependencies": {
    "babel-core": "^6.7.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "babel-register": "^6.9.0",
    "babelify": "^7.3.0",
    "browser-sync": "^2.12.10",
    "browserify": "^13.0.1",
    "critical": "^0.7.2",
    "eslint": "^0.18.0",
    "eslint-loader": "^0.9.0",
    "eslint-plugin-react": "^2.0.2",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-env": "^0.4.0",
    "gulp-load-plugins": "^1.2.4",
    "gulp-notify": "^2.2.0",
    "gulp-sass": "^2.3.1",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^1.5.3",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0"
    }
    }
  2. marceloogeda created this gist Jun 2, 2016.
    142 changes: 142 additions & 0 deletions gulpfile.babel.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,142 @@
    import critical from 'critical';
    import babelify from 'babelify';
    import browserSync from 'browser-sync';
    import browserify from 'browserify';
    import buffer from 'vinyl-buffer';
    import gulp from 'gulp';
    import plugins from 'gulp-load-plugins';
    import source from 'vinyl-source-stream';


    /* ----------------- */
    /* Development
    /* ----------------- */

    gulp.task('development', ['scripts', 'styles'], () => {
    browserSync({
    'server': './',
    'snippetOptions': {
    'rule': {
    'match': /<\/body>/i,
    'fn': (snippet) => snippet
    }
    }
    });

    gulp.watch('./client/scss/**/*.scss', ['styles']);
    gulp.watch('./client/scripts/**/*.js', ['scripts']);
    gulp.watch('./*.html', browserSync.reload);
    });


    /* ----------------- */
    /* Scripts
    /* ----------------- */

    gulp.task('scripts', () => {
    return browserify({
    'entries': ['./client/scripts/main.js'],
    'debug': true,
    'transform': [
    babelify.configure({
    'presets': ['es2015', 'react']
    })
    ]
    })
    .bundle()
    .on('error', function () {
    var args = Array.prototype.slice.call(arguments);

    plugins().notify.onError({
    'title': 'Compile Error',
    'message': '<%= error.message %>'
    }).apply(this, args);

    this.emit('end');
    })
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(plugins().sourcemaps.init({'loadMaps': true}))
    .pipe(plugins().sourcemaps.write('.'))
    .pipe(gulp.dest('./build/js/'))
    .pipe(browserSync.stream());
    });


    /* ----------------- */
    /* Styles
    /* ----------------- */

    gulp.task('styles', () => {
    return gulp.src('./client/scss/**/*.scss')
    .pipe(plugins().sourcemaps.init())
    .pipe(plugins().sass().on('error', plugins().sass.logError))
    .pipe(plugins().sourcemaps.write())
    .pipe(gulp.dest('./build/css/'))
    .pipe(browserSync.stream());
    });


    /* ----------------- */
    /* HTML
    /* ----------------- */

    gulp.task('html', ['cssmin'], () => {
    return gulp.src('index.html')
    .pipe(critical.stream({
    'base': 'build/',
    'inline': true,
    'extract': true,
    'minify': true,
    'css': ['./build/css/style.css']
    }))
    .pipe(gulp.dest('build'));
    });


    /* ----------------- */
    /* Cssmin
    /* ----------------- */

    gulp.task('cssmin', () => {
    return gulp.src('./client/scss/**/*.scss')
    .pipe(plugins().sass({
    'outputStyle': 'compressed'
    }).on('error', plugins().sass.logError))
    .pipe(gulp.dest('./build/css/'));
    });


    /* ----------------- */
    /* Jsmin
    /* ----------------- */

    gulp.task('jsmin', () => {
    var envs = plugins().env.set({
    'NODE_ENV': 'production'
    });

    return browserify({
    'entries': ['./client/scripts/main.js'],
    'debug': false,
    'transform': [
    babelify.configure({
    'presets': ['es2015', 'react']
    })
    ]
    })
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(envs)
    .pipe(buffer())
    .pipe(plugins().uglify())
    .pipe(envs.reset)
    .pipe(gulp.dest('./build/js/'));
    });

    /* ----------------- */
    /* Taks
    /* ----------------- */

    gulp.task('default', ['development']);
    gulp.task('deploy', ['html', 'jsmin']);