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 });