Lập Trình .NET: Gulp

Hiển thị các bài đăng có nhãn Gulp. Hiển thị tất cả bài đăng

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'])

Trang