Skip to content

Instantly share code, notes, and snippets.

@gugadev
Created May 20, 2017 18:22
Show Gist options
  • Save gugadev/15ca9fe5d1afdf0db3c33ef278d07461 to your computer and use it in GitHub Desktop.
Save gugadev/15ca9fe5d1afdf0db3c33ef278d07461 to your computer and use it in GitHub Desktop.
Ejemplo Gulp con BrowserSync y ES6+
const gulp = require('gulp');
const browserify = require('browserify');
const babelify = require('babelify');
const concat = require('gulp-concat');
const concatcss = require('gulp-concat-css');
const browserSync = require('browser-sync');
const babel = require('gulp-babel');
const postcss = require('gulp-postcss');
const cssnext = require('postcss-cssnext');
const postcssImport = require('postcss-import');
const postcssNested = require('postcss-nested');
const postcssVars = require('postcss-custom-properties');
const fs = require('fs');
gulp.task('serve', ['styles', 'scripts'], () => {
browserSync({
server: {
baseDir: './'
}
});
gulp.watch('css/*.css', ['styles']);
gulp.watch('js/*.es', ['scripts']);
gulp.watch("index.html").on('change', browserSync.reload);
});
gulp.task('scripts', () => {
return (
browserify()
.transform(babelify)
.require('./js/index.es', { entry: true})
.bundle()
.pipe(fs.createWriteStream('bundle.js'))
/*gulp
.src('js/*.es')
.pipe(babel())
.pipe(concat('bundle.js'))
.pipe(gulp.dest('./'))*/
);
});
gulp.task('styles', () => {
const plugins = [
cssnext(),
postcssImport(),
postcssNested(),
postcssVars()
];
return (
gulp
.src('css/*.css')
.pipe(postcss(plugins))
.pipe(concatcss('bundle.css'))
.pipe(gulp.dest('./'))
.pipe(browserSync.stream())
);
});
gulp.task('default', ['serve']);
{
"name": "clicklead-dash",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Gustavo García",
"license": "MIT",
"devDependencies": {
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"babelify": "^7.3.0",
"browser-sync": "^2.18.8",
"browserify": "^14.3.0",
"faker": "^4.1.0",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-concat": "^2.6.1",
"gulp-concat-css": "^2.3.0",
"gulp-postcss": "^6.4.0",
"postcss-cssnext": "^2.10.0",
"postcss-custom-properties": "^5.0.2",
"postcss-import": "^9.1.0",
"postcss-nested": "^1.0.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment