首页 > 代码库 > gulp配置文件(gulpfile.js)

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>    

 

gulp配置文件(gulpfile.js)