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" }