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         //省略布尔属性的值 <input checked="true"/> ==> <input />
 88         collapseBooleanAttributes: false,
 89         //删除所有空格作属性值 <input id="" /> ==> <input />
 90         removeEmptyAttributes: true,
 91         //删除<script>的type="text/javascript"
 92         removeScriptTypeAttributes: true,
 93         //删除<style>和<link>的type="text/css"
 94         removeStyleLinkTypeAttributes: true,
 95         minifyJS: true,//压缩页面JS
 96         minifyCSS: true//压缩页面CSS
 97     };
 98       gulp.src('*.html')
 99         .pipe(htmlmin(options)) 
100         .pipe(gulp.dest('dist')); 
101 }); 
102 
103 // 清除文件任务
104 gulp.task('clean', function(cb){ 
105    del(['dist/*']); 
106     cb(); 
107 }); 
108 
109 // 复制任务(连续复制多个文件时，最好加上回调函数)
110 gulp.task('copy', function(cb){ 
111     copy(['copy_file2.txt', 'copy_file.txt'], 'dist/'); 
112     cb(); 
113 }); 
114 
115 
116 /************************************************************* 
117 *                         组合任务 
118  ************************************************************/
119 
120 // js 压缩合并任务
121 gulp.task('ugconjs', function(){ 
122     // 1\. 找到文件
123       gulp.src(['js/concat_base.js', 'js/uglify_utils.js']) 
124     // 2\. 压缩文件
125         .pipe(uglify()) 
126     // 3\. 合并成一个文件
127         .pipe( concat('all.js') ) 
128     // 4\. 改名
129         .pipe(rename( function(path){ 
130           path.basename += "_" + APP_VERSION; 
131 } ) )
132     // 5\. 另存压缩后的文件
133         .pipe(gulp.dest('dist/js')) 
134 }); 
135 
136 // 组合任务： 先替换html再压缩
137 gulp.task('htmlcomp', function(){ 
138   var options = { 
139     collapseWhitespace: true,//压缩HTML
140     //省略布尔属性的值 <input checked="true"/> ==> <input />
141     collapseBooleanAttributes: false, 
142     //删除所有空格作属性值 <input id="" /> ==> <input />
143     removeEmptyAttributes: true, 
144     //删除<script>的type="text/javascript"
145     removeScriptTypeAttributes: true, 
146     //删除<style>和<link>的type="text/css"
147     removeStyleLinkTypeAttributes: true,
148     minifyJS: true,//压缩页面JS
149     minifyCSS: true//压缩页面CSS
150 }; 
151   gulp.src('canvas_test.html') 
152       .pipe( htmlReplace({'js': 'js/all_' + APP_VERSION + '.js'}) ) 153 .pipe( htmlmin(options) ) 
154       .pipe( gulp.dest('dist/') ); 
155 }); 
156 
157 // 默认任务
158 gulp.task('default', ['clean'], function(){ 
159     gulp.start('ugconjs', 'htmlcomp', 'copy', 'css', 'images'); 
160 }); 
161 
162 /************************************************************* 
163                   本地js  html css本地压缩 
164  ************************************************************/
165 // 字符串拷贝进 js/str.js 中, 然后运行 `gulp str-js`
166 gulp.task('str-js', function() { 
167     gulp.src('js/str.js') 
168     .pipe(uglify()) 
169    pipe(gulp.dest('dist/js')); 
170 }); 
171 // 字符串拷贝进 css/str.css 中, 然后运行 `gulp str-css`
172 gulp.task('str-css', function () { 
173     gulp.src('css/str.css') 
174    .pipe(cssnano()) 
175    .pipe(gulp.dest('dist/css')); 
176 }); 
177 // 字符串拷贝进 str.html 中, 然后运行 `gulp str-html`
178 gulp.task('str-html', function () { 
179     var options = { 
180         collapseWhitespace: true,//压缩HTML
181         //省略布尔属性的值 <input checked="true"/> ==> <input />
182         collapseBooleanAttributes: false, 
183         //删除所有空格作属性值 <input id="" /> ==> <input />
184         removeEmptyAttributes: true, 
185         //删除<script>的type="text/javascript"
186         removeScriptTypeAttributes: true, 
187         //删除<style>和<link>的type="text/css"
188         removeStyleLinkTypeAttributes: true, 
189         minifyJS: true,//压缩页面JS
190         minifyCSS: true//压缩页面CSS
191 }; 
192       gulp.src('str.html') 
193       .pipe(htmlmin(options)) 
194        .pipe(gulp.dest('dist')); 195 });
         });