gulp的gulpfile.js文件配置（2）

1.需要用npm安装 gulp  gulp-clean  gulp-concat gulp-connect  gulp-cssmin gulp-imagemin gulp-less gulp-load-plugins gulp-uglify  open

2.gulp的gulpfile.js文件配置

var gulp = require('gulp');
var $=require('gulp-load-plugins')();
var open=require('open');

var app={
    srcPath:'src/',
    devPath:'build/',
    prdPath:'dist/'
}

//复制js文件
gulp.task('lib',function(){
    gulp.src('bower_components/**/*.js')    //文件开始的位置
    .pipe(gulp.dest(app.devPath+'vendor'))  //复制文件的位置
    .pipe(gulp.dest(app.prdPath+'vendor'))   //复制文件的位置
    .pipe($.connect.reload());//自动加载监听变化
});

//复制html文件
gulp.task('html',function(){
    gulp.src(app.srcPath+'**/*.html')   
    .pipe(gulp.dest(app.devPath))
    .pipe(gulp.dest(app.prdPath))
    .pipe($.connect.reload());//自动加载监听变化
})

//复制json文件
gulp.task('json',function(){
    gulp.src('data/**/*.json')
    .pipe(gulp.dest(app.devPath+'data'))
    .pipe(gulp.dest(app.prdPath+'data'))
    .pipe($.connect.reload());//自动加载监听变化
});

//复制编译less文件
gulp.task('less',function(){
    gulp.src(app.srcPath+'style/index.less')//文件开始的位置
    .pipe($.less())
    .pipe(gulp.dest(app.devPath+'css'))//编译后的位置
    .pipe($.cssmin())
    .pipe(gulp.dest(app.prdPath+'css'))//编译后压缩的位置
    .pipe($.connect.reload());//自动加载监听变化
})

//复制压缩js文件
gulp.task('js',function(){
    gulp.src(app.srcPath+'script/**/*.js')   //文件开始的位置
    .pipe($.concat('index.js'))    //合并成一个js文件
    .pipe(gulp.dest(app.devPath+'js'))  //合并成一个js文件的位置
    .pipe($.uglify())
    .pipe(gulp.dest(app.prdPath+'js'))  //合并成一个压缩js文件的位置
    .pipe($.connect.reload());//自动加载监听变化
});

//复制压缩image文件
gulp.task('image',function(){
    gulp.src(app.srcPath+'image/**/*')  //文件开始的位置
    .pipe(gulp.dest(app.devPath+'image')) //编译后文件的位置
    .pipe($.imagemin())
    .pipe(gulp.dest(app.prdPath+'image'))  //编译压缩文件的位置
    .pipe($.connect.reload());//自动加载监听变化
});

//打包执行
//在控制台直接输入gulp bulid就可以了
gulp.task('bulid',['lib','json','less','html','js','image']);

//清除文件
gulp.task('clean',function(){
    gulp.src([app.devPath,app.prdPath])
    .pipe($.clean());
});

//自动启动服务器，编译相关文件,livereload自动刷新, gulp.wtch监听变化
gulp.task('serve',['bulid'],function(){
    $.connect.server({
        root:[app.devPath],
        livereload:true,
        port:12345
    });
    open('http://localhost:12345');

    gulp.watch('bower_components/**/*.js',['lib']);
    gulp.watch(app.srcPath+'**/*.html',['html']);
    gulp.watch('data/**/*.json',['json']);
    gulp.watch(app.srcPath+'style/index.less',['less']);
    gulp.watch(app.srcPath+'script/**/*.js',['js']);
    gulp.watch(app.srcPath+'image/**/*',['image']);
});

//在控制台直接输入gulp就可以了,就可以进行以上的文件编译了
gulp.task('default',['serve'])

3、demo下载：http://pan.baidu.com/s/1b5HjZo

使用说明

先npm init。。。。。。。。