# gulpfile.js代码的优化
```
/**
* 定义源目录和输出目录
* */
var app={
'appSrc':'src/',
'appBuild':'build/',
'appDist':'dist/',
}
var gulp = require('gulp');
/*导入gulp-less插件*/
var less = require('gulp-less');
/*导入gulp-cssmin插件*/
var cssmin = require('gulp-cssmin');
/*导入gulp-concat插件*/
var concat = require('gulp-concat');
/*导入gulp-uglify 插件*/
var uglify = require('gulp-uglify');
/*导入gulp-imagemin 插件*/
var imagemin = require('gulp-imagemin');
/*导入gulp-open插件*/
var open = require('gulp-open');
/*导入gulp-connect插件*/
var connect = require('gulp-connect');
/**
* 1.注册了一个html的任务
* */
gulp.task('html', function() {
/**
* 意思是读取src下所有的.html文件
* ** ： 代表是src下的任意目录, 0个或者多个
* */
gulp.src(app.appSrc+'**/*.html') /*读取index.html文件*/
.pipe( gulp.dest(app.appBuild)) /*将读取的文件写到build目录（没有会自动新建）*/
.pipe( gulp.dest(app.appDist)) /*再将读取的文件写到dist目录（没有会自动新建）*/
.pipe(connect.reload()) //当内容发生改变时， 重新加载。
});
/**
* 2.注册了一个less的任务
* */
gulp.task('less', function() {
/**
* 意思是读取src/style下所有的.less文件
* ** ： 代表是src下的任意目录, 0个或者多个
* */
gulp.src(app.appSrc+'style/**/*.less') /*读取.less文件*/
.pipe( less() ) /*将读取的 less文件 转成 css 文件 */
.pipe( gulp.dest(app.appBuild+'css')) /*将读取的css文件写到build目录（没有会自动新建）*/
.pipe( cssmin() ) /*将读取的 css文件 压缩 */
.pipe( gulp.dest(app.appDist+'css')) /*再将读取压缩过的css文件写到dist目录（没有会自动新建）*/
.pipe(connect.reload()) //当内容发生改变时， 重新加载。
});
/**
* 3.注册了一个js的任务
* */
gulp.task('js', function() {
/**
* 意思是读取src/js下所有的.js文件
* ** ： 代表是src下的任意目录, 0个或者多个
* */
gulp.src(app.appSrc+'js/**/*.js') /*读取.js文件*/
.pipe( concat('main.js') ) /*将读取所有的js文件 合并成一个main.js文件 */
.pipe( gulp.dest(app.appBuild)) /*将读取的文件写到build目录（没有会自动新建）*/
.pipe( uglify() ) /*将读取main.js文件并压缩main.js文件 */
.pipe( gulp.dest(app.appDist)) /*再将读取压缩后的文件写到dist目录（没有会自动新建）*/
.pipe(connect.reload()) //当内容发生改变时， 重新加载。
});
/**
* 4.注册了压缩图片的任务
* */
gulp.task('image', function() {
/**
* 意思是读取src/image下所有的图片文件
* ** ： 代表是src下的任意目录, 0个或者多个
* */
gulp.src(app.appSrc+'image/**/*') /*读取图片文件*/
.pipe( gulp.dest(app.appBuild+'image')) /*将读取所有的图片文件写到build目录（没有会自动新建）*/
.pipe( imagemin() ) /*将读取所有的图片文件进行压缩 */
.pipe( gulp.dest(app.appDist+'image')) /*再将读取压缩后的文件写到dist目录（没有会自动新建）*/
.pipe(connect.reload()) //当内容发生改变时， 重新加载。
});
/**
* 5.注册一个lib任务（ 把 bower下载的前端框架放到我们项目当中 ）
* */
gulp.task('lib',function () {
gulp.src(['bower_components/**/*.js','bower_components/**/*.css'])
.pipe(gulp.dest(app.appBuild+'lib'))
.pipe(gulp.dest(app.appDist+'lib'))
.pipe(connect.reload()) //当内容发生改变时， 重新加载。
});
/**
* 6.注册一个build任务（同时执行多个任务）
* 当前 bulid 时，会自动把数组当中的所有任务给执行。
* */
gulp.task('build',['html','less','js','image','lib']);
/**
* 7.定义server任务
* 搭建一个服务器。设置运行的构建目录
* */
gulp.task('server',['build'],function () {
/*1.设置web服务器*/
connect.server({
root:[app.appBuild],//服务器管理/运行哪个目录(默认是项目的根目录)
livereload:true, //是否热更新。
port:9999 //指定web服务的端口号（默认是8080）
})
/*2.gulp监视文件，并且可以在文件发生改动时候做一些事情.
* 参数一：监视的文件
* 参数二: 在文件变动后执行的一个task任务
* */
gulp.watch(['bower_components/**/*'], ['lib']);
gulp.watch(app.appSrc+'**/*.html',['html']);
gulp.watch(app.appSrc+'js/**/*.js',['js']);
gulp.watch(app.appSrc+'image/**/*',['image']);
gulp.watch(app.appSrc+'style/**/*.less',['less']);
//open相当于浏览器，下面是通过浏览器打开百度网址
var options = {
uri: '127.0.0.1:9999',
app: 'chrome'
};
gulp.src('')
.pipe(open(options));
});
/**
* 8.定义默认任务
* 直接执行gulp 会调用该任务
* */
gulp.task('default',['server']);
```
总结
需要(package.json,gulpfile.js)
通过npm i来下载package.json下面的所及依赖项
