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

来源：互联网发布：打谱软件什么意思编辑：程序博客网时间：2024/06/06 00:43

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。。。。。。。。

0 0