gulp（gulpfile.js）配置文件

1 /*
 2 参考代码网址：
 3 http://www.ido321.com/1622.html           
 4 http://colobu.com/2014/11/17/gulp-plugins-introduction/#gulp-rename            
 5 https://github.com/nimojs/gulp-book  
 6  */
 7 // 获取 gulp
 8 var gulp = require('gulp'),
 9     // js 压缩插件 （用于压缩 JS）
 10     uglify = require('gulp-uglify'),
 11     // 压缩css插件(cssnano将取代gulp-minify-css)
 12     minifyCSS = require('gulp-minify-css'),
 13     cssnano = require('gulp-cssnano'),
 14     // 获取 gulp-imagemin 模块
 15     imagemin = require('gulp-imagemin'),
 16     // 重命名 插件
 17     rename = require('gulp-rename'),
 18     // 压缩html插件
 19     htmlmin = require('gulp-htmlmin'),
 20     // 合并文件
 21     concat = require("gulp-concat"),
 22     // html 文件对合并文件后的替换处理插件
 23     htmlReplace = require("gulp-html-replace"),
 24     // 复制文件（文件拷贝）
 25     copy = require('copy'),
        //webserver服务 　　　　　
        webserver = require('gulp-webserver');

 27 // 版本号
 28 var APP_VERSION = 'v.1.0';
 29
// 开启服务

　　　　gulp.src('./')
　　　　　　.pipe(webserver({
　　　　　　　　port: 8880,//端口
　　　　　　　　host: 'localhost',//域名
　　　　　　　　liveload: true,//实时刷新代码。不用f5刷新
　　　　　　　　directoryListing: {
　　　　　　　　　　path: './index.html', //要打开的文件
　　　　　　　　　　enable: true
　　　　　　　　}
　　　　　　}))
　　　　});

 30 
 31 // 压缩 js 文件
 32 // 在命令行使用 gulp script 启动此任务
 33 gulp.task('script', function() {
 34     // 1\. 找到文件
 35     gulp.src('js/*.js')
 36     // 2\. 压缩文件
 37         .pipe(uglify())
 38     // new: 压缩前修改压缩后新文件名字
 39         .pipe(rename( function(path){
 40           path.basename += "_" + APP_VERSION; 
 41         } ) )
 42     // 3\. 另存压缩后的文件
 43         .pipe(gulp.dest('dist/js'))
 44 });
 45 
 46 // 压缩 css 文件
 47 // 在命令行使用 gulp css 启动此任务
 48 gulp.task('css', function () { 
 49     // 1\. 找到文件
 50     gulp.src('css/*.css')
 51     // 2\. 压缩文件
 52         .pipe(minifyCSS())
 53     // 3\. 另存为压缩文件
 54         .pipe(gulp.dest('dist/css'))
 55 });
 56 
 57 // 压缩图片任务
 58 // 在命令行输入 gulp images 启动此任务
 59 gulp.task('images', function () { 
 60     // 1\. 找到图片
 61     gulp.src('images/*.*')
 62     // 2\. 压缩图片
 63         .pipe(imagemin({
 64             progressive: true
 65         }))
 66     // 3\. 另存图片
 67         .pipe(gulp.dest('dist/images'))
 68 });
 69 
 70 // 合并js 任务(合并压缩成功后的 js文件)
 71 gulp.task('concat', function () { 
 72       gulp.src('dist/js/*.js')  //要合并的文件
 73     .pipe( concat('all.js') )  // 合并匹配到的js文件并命名为 "all.js"
 74     .pipe( gulp.dest('dist/js') );
 75 });
 76 
 77 // 解决 gulp 合并文件后， html调用代码对应替换
 78 gulp.task('htmlreplace', function(){
 79       gulp.src('canvas_test.html')
 80       .pipe( htmlReplace({'js': 'js/all.js'}) )
 81       .pipe( gulp.dest('dist/') );
 82 });
 83 // 压缩html 任务
 84 gulp.task('htmlmin', function () { 
 85     var options = { 
 86         collapseWhitespace: true,//压缩HTML
 87         //省略布尔属性的值  ==> 
 88         collapseBooleanAttributes: false,
 89         //删除所有空格作属性值  ==> 
 90         removeEmptyAttributes: true,
 91         //删除