gulp基本设置

var gulp = require('gulp');		
var clean = require('gulp-clean');
var concat = require('gulp-concat');
//var jade = require('gulp-jade');	//暂时不需要
//var sass = require('gulp-sass');	//可以为sass、less、scss

var util = require('gulp-util');		//输入提示,日志
var notify = require('gulp-notify');	//系统提示


var browserSync = require('browser-sync');//	浏览器异步处理
var reload = browserSync.reload;


var runSequence = require('run-sequence');	//执行顺序

var uglify = require('gulp-uglify');	//专门压缩js
var cleanCSS = require('gulp-clean-css');	//css压缩
var htmlmin = require('gulp-htmlmin');	//html压缩

//var assetRev = require('gulp-asset-rev');	//加版本号


var rev = require('gulp-rev');		//版本管理
var revCollector = require('gulp-rev-collector');	//版本管理




var src = {
	html:['src/html/*.html'],
	css:['src/css/*.css'],
	js:['src/js/*.js']
}


var build = {
	base:'dist/',
	views:'dist/views/',
	css:'dist/css/',
	js:'dist/js/'
}

gulp.task('build:clean',function(){
	
	return gulp.src(build.base,{read:false})
	.pipe(clean({force:true}))
	.pipe(notify(({message:'清除---目录结构'})))
	
})


gulp.task('build:views',function(){
	
	return gulp.src(src.html)
	.pipe(htmlmin({collapseWhitespace: true,minifyJS:true,minifyCSS:true}))	//minifyJS----压缩页面中js
	.pipe(gulp.dest(build.base))
	.pipe(browserSync.reload({stream:true}))
	.pipe(notify({message:'html---编译完成'}))
	
})


gulp.task('build:css',function(){
	
	return gulp.src(src.css)
	.pipe(concat('app.css'))
	.pipe(cleanCSS({debug: true}, function(details) {
      console.log(details.name + ': ' + details.stats.originalSize);
      console.log(details.name + ': ' + details.stats.minifiedSize);
    }))
	.pipe(gulp.dest(build.css))
	.pipe(browserSync.reload({stream:true}))
	.pipe(notify({message:'css---编译完成'}))
	
})

/* 
return gulp.src('styles/*.css')
    .pipe(cleanCSS({debug: true}, function(details) {
      console.log(details.name + ': ' + details.stats.originalSize);
      console.log(details.name + ': ' + details.stats.minifiedSize);
    }))
  .pipe(gulp.dest('dist')); */


gulp.task('build:js',function(){
	
	return gulp.src(src.js)
	.pipe(concat('app.js'))
	.pipe(uglify())
	.pipe(gulp.dest(build.js))
	.pipe(browserSync.reload({stream:true}))
	.pipe(notify({message:'js编译完成'}))
	
})

gulp.task('build:app',['build:css','build:js','build:views'])


gulp.task('build',function(){
	
	runSequence('build:clean',['build:app'])
	
})

gulp.task('bs:sync',function(){
	
	browserSync({
		
		notify:false,
		port:3006,
		server:{
			baseDir:build.base
		}
		
	})
	
})



gulp.task('watch',function(){
	
	gulp.watch(src.html,['build:views']),
	gulp.watch(src.js,['build:js']),
	gulp.watch(src.css,['build:css'])
	
})
/*
做同步到浏览器:再编译之后自动刷新浏览器

*/
 


//--------------------------gulp执行----------------------------
gulp.task('default',function(){
	
	//下面两种运行方式都可以
	gulp.start('build','watch','bs:sync')
	//runSequence('build','bs:sync','watch')
	
})






//------------------------------------------------------

gulp.task('help',function(){
	
	console.log('build 			创建')
	console.log('prod-----		生产')
	
	
})


/*function log(msg){
	util.log(util.colors.blue(msg))
}
function handleError(err){
	
	log(err.toString());
	this.emit('end');
	
}
*/

  package.json包

{
  "name": "my-gulp",
  "version": "1.0.0",
  "description": "demo",
  "dependencies": {
    "express": "3.x",
    "gulp-rev-collector": "^1.2.2"
  },
  "devDependencies": {
	"browser-sync": "^2.12.3",
    "gulp-asset-rev": "0.0.15",
    "gulp-clean": "^0.3.2",
    "gulp-clean-css": "^3.8.0",
    "gulp-concat": "^2.6.0",
    "gulp-htmlmin": "^3.0.0",
    "gulp-mini-css": "^0.0.3",
    "gulp-notify": "^3.0.0",
    "gulp-requirejs-optimize": "^0.3.2",
    "gulp-rev": "^8.0.0",
    "gulp-uglify": "^1.5.3",
    "run-sequence": "^2.1.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "chua",
  "license": "ISC"
}

  

posted on 2017-09-18 20:59  骑士007  阅读(206)  评论(0编辑  收藏  举报

导航