gulp

npmjs:https://www.npmjs.com/

gulp:http://gulpjs.com/

sass + gulp-autoprefixer

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('default', function() {
	console.log('hello world!');
});

gulp.task('styles', function() {
	gulp.src('sass/**/*.scss')
		.pipe(sass().on('error', sass.logError))
		.pipe(autoprefixer({
			browsers: ['last 3 versions']
		}))
		.pipe(gulp.dest('./css'));
});

 watch:

gulp.task('default', function() {
	gulp.watch('sass/**/*.scss', ['styles']);
});

live Editing:

browser-sync:http://www.browsersync.cn/docs/gulp/

1. Install browser-sync.
2. Create a browser-sync object and initialize the server.

   var browserSync = require('browser-sync').create();
   browserSync.init({
       server: "./"
   });
   browserSync.stream();
   

   　　

3. Run gulp in Terminal, see how browser opens with the page open

unit test：

npm install --save-dev gulp-jasmine-phantom

var jasmine = require('gulp-jasmine-phantom');

gulp.task('tests', function () {
	gulp.src('tests/spec/extraSpec.js')
		.pipe(jasmine({
			integration: true,
			vendor: 'js/**/*.js'
		}));
});

　　

gulp-concat:

npm install --save-dev gulp-concat

https://www.npmjs.com/package/gulp-concat

var concat = require('gulp-concat');
 
gulp.task('scripts', function() {
  return gulp.src('./lib/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/'));
});

gulp-uglify:

npm install --save-dev gulp-uglify

https://www.npmjs.com/package/gulp-uglify

var uglify = require('gulp-uglify');
 
gulp.task('compress', function() {
  return gulp.src('lib/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

　

gulp-babel:

npm install --save-dev gulp-babel babel-preset-es2015

https://www.npmjs.com/package/gulp-babel

const gulp = require('gulp');
const babel = require('gulp-babel');
 
gulp.task('default', () => {
	return gulp.src('src/app.js')
		.pipe(babel({
			presets: ['es2015']
		}))
		.pipe(gulp.dest('dist'));
});

　

imagemin-pngquant:

npm install --save imagemin-pngquant

var gulp = require('gulp');
var imageminPngquant = require('imagemin-pngquant');
 
gulp.task('default', function () {
	return gulp.src('images/*.png')
		.pipe(imageminPngquant({quality: '65-80', speed: 4})())
		.pipe(gulp.dest('build/images'));
});

　　

　

-------------------------------------------------------------------------------------------------------------------------------------------------------------

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();
var jasmine = require('gulp-jasmine-phantom');

gulp.task('default', ['styles', 'lint'], function() {
	gulp.watch('sass/**/*.scss', ['styles']);
	gulp.watch('js/**/*.js', ['lint']);

	browserSync.init({
		server: './'
	});
});

gulp.task('styles', function() {
	gulp.src('sass/**/*.scss')
		.pipe(sass().on('error', sass.logError))
		.pipe(autoprefixer({
			browsers: ['last 2 versions']
		}))
		.pipe(gulp.dest('./css'))
		.pipe(browserSync.stream());
});

gulp.task('tests', function () {
	gulp.src('tests/spec/extraSpec.js')
		.pipe(jasmine({
			integration: true,
			vendor: 'js/**/*.js'
		}));
});