Thứ Sáu, 23 tháng 12, 2016

Compile SASS to CSS with Gulp

Install gulp-sass
npm install gulp-sass --save-dev

Create tasks:
var gulp = require('gulp');
var $ = require('gulp-load-plugins')({lazy: true});

gulp.task('clean-styles', function () {
    return gulp.src('build/styles', {read: false})
 .pipe($.clean());
});

gulp.task('styles',['clean-styles'], function () {
    return gulp.src('source/scss/**/*.scss')
 .pipe($.sass())
 .pipe(gulp.dest('build/styles'));
});

Making gulp file cleaner with gulp-load-plugins

gulpfile.js without gulp-load-plugins:
var gulp = require('gulp');
var clean = require('gulp-clean');
var concat = require('gulp-concat');
var babel = require('gulp-babel');
var uglify = require('gulp-uglify');
var jshint = require('gulp-jshint');
var jscs =  require('gulp-jscs');

gulp.task('clean', function () {
    return gulp.src('build', {read: false})
        .pipe(clean());
});

gulp.task('build', ['clean'], function() {
     return gulp.src('source/**/*.js')
  .pipe(jshint())
  .pipe(jshint.reporter('jshint-stylish'))
  .pipe(jshint.reporter('fail'))
    .pipe(babel({
        presets: 'es2015'
    }))
 .pipe(concat('all.js'))
 .pipe(uglify())
    .pipe(gulp.dest('build'));
})

gulp.task('jshint', function () {
    return gulp.src('source/**/*.js')
        .pipe(jscs())
  .pipe(jshint())
  .pipe(jshint.reporter('jshint-stylish'))
  .pipe(jshint.reporter('fail'));
});

gulp.task('default', ['build'])

Install gulp-load-plugins:
npm install --save-dev gulp-load-plugins

gulpfile.js with gulp-load-plugins:
var gulp = require('gulp');
var $ = require('gulp-load-plugins')({lazy: true});

gulp.task('clean', function () {
    return gulp.src('build', {read: false})
        .pipe($.clean());
});

gulp.task('build', ['clean'], function() {
     return gulp.src('source/**/*.js')
  .pipe($.jshint())
  .pipe($.jshint.reporter('jshint-stylish'))
  .pipe($.jshint.reporter('fail'))
    .pipe($.babel({
        presets: 'es2015'
    }))
 .pipe($.concat('all.js'))
 .pipe($.uglify())
    .pipe(gulp.dest('build'));
})

gulp.task('jshint', function () {
    return gulp.src('source/**/*.js')
        .pipe($.jscs())
  .pipe($.jshint())
  .pipe($.jshint.reporter('jshint-stylish'))
  .pipe($.jshint.reporter('fail'));
});

gulp.task('default', ['build'])

Thứ Năm, 22 tháng 12, 2016

Using JSHint with Gulp

Install jshint, gulp-jshint, jshint-stylish
npm install jshint gulp-jshint jshint-stylish --save-dev

Config javascript version in .jshintrc file:
{
  "esversion": 6
}

Define task in gulpfile.js:
var gulp = require('gulp');
var jshint = require('gulp-jshint');

gulp.task('jshint', function () {
    return gulp.src('source/**/*.js')
  .pipe(jshint())
  .pipe(jshint.reporter('jshint-stylish'))
  .pipe(jshint.reporter('fail'));
});

Chủ Nhật, 18 tháng 12, 2016

Gulp Basic

Install Gulp:
npm install gulp -g
npm install gulp --save-dev


Babel + Concat + Uglify with Gulp:
npm install gulp-babel --save-dev
npm install gulp-uglify --save-dev
npm install gulp-concat --save-dev
npm install gulp-clean --save-dev

Gulpfile.js:
var gulp = require('gulp');
var clean = require('gulp-clean');
var concat = require('gulp-concat');
var babel = require('gulp-babel');
var uglify = require('gulp-uglify'); 

gulp.task('clean', function () {
    return gulp.src('build', {read: false})
        .pipe(clean());
});

gulp.task('build', ['clean'], function() {
     return gulp.src('source/**/*.js')
    .pipe(babel({
        presets: 'es2015'
    }))
   .pipe(concat('all.js'))
   .pipe(uglify())
   .pipe(gulp.dest('build'));
})

gulp.task('default', ['build'])

Babel Basic

Install globally:
npm install babel-cli -g

Install locally
npm install babel-cli --save-dev

Install Babel Preset ES2015
npm install babel-preset-es2015 --save-dev

Transpile all files inside a specific folder:
babel [source-folder] --presets es2015 --out-dir [build-folder]

Transpile and bundle all files inside a specific folder:
babel [source] --presets es2015 --out-file [build/bundle.js]

Transpiling with watch option:
babel [source] --presets es2015 --out-file [build/bundle.js] -w

Configuration with .babelrc
{
    "presets": ["es2015"],
    "plugins": [],
    "sourceMaps": true
}

Bower Basic

Install Bower:
npm install bower -g

Create bower.json file:
bower init

Install package:
bower install [package_name]
bower install [package_name] --save
bower install [package_name] --save-dev

Install specific package:
bower install [package_name]#[version]

Configuration with .bowerrc
{
  "directory": "bower_components"
}

NPM Basic

Create package.json file:
npm init

Install package:
npm install [package_name] --save
npm install [package_name] --save-dev
npm install [package_name] -g

Install specific version:
npm install [package_name]@[version] --save
npm install [package_name]@[version] --save-dev
npm install [package_name]@[version] -g