var gulp = require('gulp'), connect = require('gulp-connect'), browserify = require('gulp-browserify'), concat = require('gulp-concat'), port = process.env.port || 5000; gulp.task('browserify',function(){ gulp.src('./app/js/main.js') .pipe(browserify({ transform: 'reactify', })) .pipe(gulp.dest('./dist/js')) }); // live reload gulp.task('connect',function(){ connect.server({ // root:'./', port: port, livereload: true, }) }) // reload Js gulp.task('js',function(){ gulp.src('./dist/**/*.js') .pipe( connect.reload() ) }) gulp.task('html',function(){ gulp.src('./app/**/*.html') .pipe( connect.reload() ) }); gulp.task('watch',function(){ gulp.watch('./dist/**/*.js',['js']); gulp.watch('./app/**/*.html',['html']); gulp.watch('./app/js/**/*.js',['browserify']); }) gulp.task('default',['browserify']); gulp.task('serve',['browserify','connect','watch']);
转载:http://www.tuicool.com/articles/FJVNZf
需要熟记的5个函数;
gulp只有五个方法: task
, run
, watch
, src
,和 dest
,在项目根目录新建一个js文件并命名为 gulpfile.js
// 引入 gulp var gulp = require('gulp'); // 引入组件 //var jshint = require('gulp-jshint'); var sass = require('gulp-sass'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); // 检查脚本 /*gulp.task('lint', function() { gulp.src('./js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); });*/ // 编译Sass gulp.task('sass', function() { gulp.src('./sass/*.sass') .pipe(sass()) .pipe(gulp.dest('./css')) .pipe(rename('all.min.css')) .pipe(gulp.dest('./css')); }); // 合并,压缩文件 gulp.task('scripts', function() { gulp.src('./js/*.js') .pipe(concat('all.js')) .pipe(gulp.dest('./dist')) .pipe(rename('all.min.js')) .pipe(uglify()) .pipe(gulp.dest('./dist')); }); // 默认任务 gulp.task('default', function(){ gulp.run('sass', 'scripts'); // 监听文件变化 gulp.watch('./js/*.js', function(){ gulp.run('sass', 'scripts'); }); });