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