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 });
});
网友评论