gulp配置文件(gulpfile.js)

須要安裝的插件

"gulp": "^3.9.1",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.1",
"gulp-connect": "^5.0.0",
"gulp-cssmin": "^0.2.0",
"gulp-imagemin": "^3.3.0",
"gulp-less": "^3.3.2",
"gulp-load-plugins": "^1.5.0",
"gulp-minify-css": "^1.2.4",
"gulp-uglify": "^3.0.0",
"open": "0.0.5",
"serve": "^6.0.0"

npm i --save-dev gulp gulp-clean gulp-concat gulp-connect  gulp-imagemin gulp-less gulp-load-plugins gulp-minify-css gulp-uglify open serve

 1 <script>
 2 var gulp=require('gulp');   
 3 var $=require('gulp-load-plugins')();//實例化 方便調用 gulp-minify-css gulp-uglify 
 4 var open=require('open');   // 實例化open方法
 5 var app={  
 6     srcPath:'src/',  //開發目錄
 7     devPath:'build/', //生產目錄
 8     prdPath:'dist/'//發佈目錄（用於發佈）
 9 };
10 
11 gulp.task('lib',function () {            //爲事件命名
12     gulp.src('bower_comments/**/*.js')  //複製項目所依賴的js(如：經過bower安裝的angular.js)
13     .pipe(gulp.dest(app.devPath+'vendor'))  //將文件黏貼到生產目錄
14     .pipe(gulp.dest(app.prdPath+'vendor'))  //將文件黏貼到發佈目錄
15         .pipe($.connect.reload());          //監測文件改變後從新運行黏貼複製
16 });
17 
18 gulp.task('html',function () {
19     gulp.src(app.srcPath+'**/*.html')  //複製開發目錄下的全部html文件
20         .pipe(gulp.dest(app.devPath))  //將文件黏貼到生產目錄
21         .pipe(gulp.dest(app.prdPath))  //將文件黏貼到發佈目錄
22         .pipe($.connect.reload());
23 });
24 
25 gulp.task('json',function () {
26     gulp.src(app.srcPath+'data/**/*.json')   //複製開發目錄下的全部json文件
27         .pipe(gulp.dest(app.devPath+'data'))
28         .pipe(gulp.dest(app.prdPath+'data'))
29         .pipe($.connect.reload());
30 });
31 
32 
33 gulp.task('less',function () {
34    gulp.src(app.srcPath+'style/index.less')
35        .pipe($.less())                      //將less文件編譯爲css
36        .pipe(gulp.dest(app.devPath+'css'))  //將編譯後的css文件黏貼到生產目錄
37        .pipe($.minifyCss())   //用gulp-minify-css壓縮css文件
38        .pipe(gulp.dest(app.prdPath+'css'))  //
39        .pipe($.connect.reload());
40 });
41 gulp.task('css',function () {
42    gulp.src(app.srcPath+"style/*.css")
43        .pipe(gulp.dest(app.prdPath+'css'))
44        .pipe(gulp.dest(app.devPath+"css"))
45        .pipe($.connect.reload());
46 });
47 gulp.task('js',function () {
48     gulp.src(app.srcPath+'script/**/*.js')
49         .pipe($.concat('index.js'))
50         .pipe(gulp.dest(app.devPath+'js'))
51         .pipe($.uglify())           //用gulp-uglify壓縮js文件
52         .pipe(gulp.dest(app.prdPath+'js'))
53         .pipe($.connect.reload());
54 });
55 
56 
57 gulp.task('img',function () {
58     gulp.src(app.srcPath+'image/**/*')
59         .pipe($.imagemin())    //經過 gulp-imagemin 壓縮圖片文件
60         .pipe(gulp.dest(app.devPath+"image"))
61         .pipe(gulp.dest(app.prdPath+'image'))
62         .pipe($.connect.reload());
63 });
64 
65 gulp.task('build',['img','less','js','html','lib','json','css']);  //將多個命令整合爲一個命令方便運行
66 
67 gulp.task('serve',['build'],function () {   //開啓一個本地服務器，方便瀏覽調試
68     $.connect.server({           //
69         root:[app.prdPath],     // 設置服務器根目錄
70         livereload:true,    //啓動服務，自動打開瀏覽器(低端瀏覽不支持)
71         port:1234       //定義本地瀏覽器端口號(不與其餘端口衝突任意定義)
72     });
73     open('http://localhost:1234');   //打開本地服務器的主頁
74     gulp.watch(app.srcPath+'script/**/*.js',['js']);   //監聽js文件目錄,文件改變從新啓動 js 任務
75     // gulp.watch('bower_comments/**/*',['lib']);       
76     gulp.watch(app.srcPath+'style/**/*.less',['less']);//監聽less文件目錄,文件改變從新啓動 less 任務
77     gulp.watch(app.srcPath+'**/*.html',['html']);
78     gulp.watch(app.srcPath+'data/**/*.json',['json']);
79     gulp.watch(app.srcPath+'image/**/*',['img']);
80 
81 });
82 
83 gulp.task('clean',function () {   //清除 生產目錄 和發佈目錄的所有文件
84     gulp.src([app.devPath,app.prdPath])
85         .pipe($.clean())
86 });
87 
88 gulp.task('default',['serve']);   //定義一個默認任務， 在命令行中只須要 輸入 gulp  不須要 跟任務名
89 </script>