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>
