# 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下面的所及依賴項
