chuleta gulp

gistfile1.txt

# Instalar gulp
$ npm install -g gulp

# Hacer link a nuestro proyecto
$ npm link gulp --save-dev

# Crear package.json

{
  "name": "name_you_want",
  "version": "0.0.1",
  "devDependencies": { }
}

# Añadir dependencias definidas en "gulp.js"  (se añaden a package.json)
$ npm install gulp-uglify gulp-sass del gulp-autoprefixer gulp-minify-css gulp-rename gulp-concat gulp-util --save-dev
$ npm install --save-dev browser-sync

# Installar paquetes definidos en package.json
$ npm install

# play!!!

$ gulp

note: 
a) Why do I get the Waiting...Fatal error: watch ENOSPC -> echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p (https://stackoverflow.com/questions/16748737/grunt-watch-error-waiting-fatal-error-watch-enospc o http://discuss.emberjs.com/t/using-ember-build-watch-on-vagrant-box-error/6517/2)
 

gulpfile.js

/* http://www.browsersync.io/docs/gulp/  */

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');
var del = require('del');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var gutil = require('gulp-util');

/* path to resources source & final */
var path = {
    src_js_files: 'src/js/**/*.js',
    src_css_dir: 'src/css',
    src_css_files: 'src/css/**/*.css',
    src_js_dir: 'src/js',
    src_scss_files: 'src/scss/**/*.scss',
    dist_dir: 'public_html',
    dist_css_dir: 'public_html/css',
    dist_js_dir: 'public_html/js',
    cssGlob_files: 'public_html/css/**/*.css',
    html_files: 'public_html/*.html'
};

/* Custom handle error */
function handleError(err) {
    gutil.log(gutil.colors.red(err));
    gutil.beep();
}

// Static server
gulp.task('browser-sync', function () {
    browserSync({
        server: {
            baseDir: "public_html",
            index: "index.html"
        }//,
        //files: ["public_html/css/*.css", "public_html/**/*.html", "public_html/js/**/*.js"]
    })
});

gulp.task('init', function () {
    gulp.start('clean');
});

//gulp.task('default', ['clean', 'browser-sync'],  function() {
//    gulp.start('build');
//    gulp.start('watch');
//    gulp.watch("public_html/*.html", ['bs-reload']);
//});

gulp.task('clean', function (cb) {
    del([path.dist_js_dir,path.dist_css_dir],cb);
    console.log('clean before build...');
});
// parallel task
gulp.task('build', function () {
    console.log('begin build!!!');
    gulp.start('sass','css', 'js', 'imgs');
    console.log('build sucess...');
});

gulp.task('sass', function () {
    gulp.src(path.src_scss_files)
            .pipe(sass({style: 'expanded'}).on('error', handleError))
            .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
            .pipe(gulp.dest(path.dist_css_dir))
            .pipe(rename({suffix: '.min'}))
            .pipe(minifycss())
            .pipe(gulp.dest(path.dist_css_dir))
            .pipe(reload({stream: true}));
    console.log('SASS sucess...');
});

gulp.task('css', function () {
    gulp.src(path.src_css_files)
            .pipe(gulp.dest(path.dist_css_dir))
            .pipe(rename({suffix: '.min'}))
            .pipe(minifycss())
            .pipe(gulp.dest(path.dist_css_dir))
            .pipe(reload({stream: true}));
    console.log('CSS sucess...');
});


gulp.task('js', function () {
    gulp.src(path.src_js_files)
            // .pipe(concat('all.min.js'))
            .pipe(uglify())
            .pipe(gulp.dest(path.dist_js_dir))
            .pipe(reload({stream: true}));
    console.log('JS sucess...');
});

gulp.task('imgs', function () {
    console.log('Images sucess...');
});

gulp.task('watch', function () {
    gulp.watch(path.src_scss, ['styles']);
});

// Reload all Browsers
gulp.task('bs-reload', function () {
    console.log('start bs-reload...');
    browserSync.reload();
});

// Watch scss, CSS and html files, doing different things with each.
gulp.task('default', ['clean','browser-sync'], function () {
    gulp.start('build');
    // 
    gulp.watch("src/scss/*.scss", ['sass']);
    gulp.watch("src/css/*.css", ['css']);
    gulp.watch("src/js/*.js", ['js', browserSync.reload]);
    gulp.watch("public_html/*.html", ['bs-reload']);
});

// or...

gulp.task('browser-sync-proxy', function () {
    browserSync({
        proxy: "yourlocal.localhost"
    });
});

package.json

{
  "name": "Learning_HTML5",
  "version": "0.0.1",
  "devDependencies": {
    "gulp-rename": "~1.2.0",
    "gulp-util": "~3.0.3",
    "gulp-concat": "~2.5.0",
    "gulp-uglify": "~1.1.0",
    "gulp-minify-css": "~0.4.6",
    "del": "~1.1.1",
    "gulp-autoprefixer": "~2.1.0",
    "gulp-sass": "~1.3.3"
  }
}