Contents
  1. 1. Gulp使用
    1. 1.1. 安装
    2. 1.2. 打包压缩示例
      1. 1.2.1. 项目结构

Gulp使用

安装

1
2
npm install gulp-cli -g
npm install gulp -D

安装完成后在项目根目录下创建gulpfile.js文件。此文件名不能修改!
touch gulpfile.js

gulp官方及Gulp插件:

https://gulpjs.com/plugins/

打包压缩示例

项目结构

根目录结构

1
2
3
4
5
6
7
8
9
10
11
12
#> tree -L 1
├── README.md
├── Temp
├── app
├── bower.json
├── bower_components
├── build
├── data
├── gulpfile.js
├── node_modules
├── package.json
└── reportTemplates

源码目录结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# app> tree -L 2
├── 404.html
├── assets
│   ├── css
│   ├── images
│   └── js #包括:service、controller、directive等。
├── demo.html #demo文件,忽略
├── editor.html
├── favicon.ico
├── index.html
├── reportdetails.html
├── reportdetails_nk.html #无用文件,忽略
├── reportlist.html
├── vendor #第三方
│   ├── css
│   ├── fonts
│   └── js
└── views #ng视图文件
├── content.html
├── footer.html
├── header_logo.html
└── herosection.html

gulpfile.js文件📃:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
// =============================================================================
// Gulp Task Dependencies
// =============================================================================
var gulp = require('gulp');
var browserSync = require('browser-sync'); //local service
var reload = browserSync.create().reload;
var clean = require('gulp-clean'); //del file
var rev = require('gulp-rev'); //update version number , md5
var revCollector = require('gulp-rev-collector'); // deprecated
var wiredep = require('wiredep').stream;
/** update lib reference in HTML */
var inject = require('gulp-inject');
var series = require('stream-series');
var htmlReplace = require('gulp-html-replace');
/** Compress HTML */
var htmlmin = require('gulp-htmlmin');
var gulpRemoveHtml = require('gulp-remove-html');
var removeEmptyLines = require('gulp-remove-empty-lines');
/** Compress CSS */
var minify = require('gulp-minify-css'); //deprecated
var cleanCSS = require('gulp-clean-css'); //compress CSS
var eslint = require('gulp-eslint'); //check js
var jshint = require('gulp-jshint');
/** Compress JS */
var uglify = require('gulp-uglify'); //compress&ugly js
var rename = require('gulp-rename'); //rename files' name
var concat = require('gulp-concat'); //merge multi files
/** Compress Image */
var imagemin = require('gulp-imagemin'); //compress image
var runSequence = require('run-sequence');
// var gulpSequence = require('gulp-sequence');
/* 解决AngularJS 缩写写法 gulp打包压缩后JS报错问题 */
var ngAnnotate = require('gulp-ng-annotate');
// =============================================================================
// Gulp Task
// =============================================================================
var buildBasePath = 'build'; //build ouput files folder
// =======================================================================
// Local -- Preview Task, No Compress, No Package, No Mix...
// =======================================================================
gulp.task('cleanTemp', function() {
return gulp.src('./Temp', { read: false })
.pipe(clean());
});
/** Start Local Server */
gulp.task('start:local', function() {
browserSync({
open: true,
port: '9000',
proxy: 'http://localhost/sites/JDBToolsPlatform/ProcessQualityReport/Temp',
https: false
});
gulp.watch('./app/**/*', ['copy:temp']);
//gulp.watch('./Temp/*.html').on('change', reload);
});
/** Copy Original Files To Temp */
gulp.task('copy:temp', function() {
return gulp.src('./app/**/*')
.pipe(gulp.dest('./Temp'))
.pipe(browserSync.reload({ stream: true })); //所有文件都会刷新;Todo
});
/** 将bower依赖自动注入HTML文件中 */
gulp.task('bowerInject', function() {
return gulp.src('./app/index.html')
.pipe(wiredep({
optional: 'configuration',
goes: 'here'
}))
.pipe(gulp.dest('./tmp'));
});
/** 本地测试组合任务 -- 无压缩、带注释 */
gulp.task('local', function() {
runSequence('cleanTemp', 'copy:temp', 'start:local');
});
// =======================================================================
// Prod -- Local Preview Task, Compressed, Mixed, md5 ...
// =======================================================================
/** Clean The Whole build Folder */
gulp.task('cleanBuild', function() {
return gulp.src(buildBasePath, { read: false })
.pipe(clean());
});
/** Copy Vendor Lib Files To Prod */
gulp.task('copyVendor2prod', function() {
return gulp.src('./app/vendor/**/*')
.pipe(gulp.dest(buildBasePath + '/vendor'));
});
gulp.task('copyFavicon', function() {
return gulp.src('./app/favicon.ico')
.pipe(gulp.dest(buildBasePath));
});
/** 压缩HTML(先合并HTML中CSS/JS)*/
gulp.task('minifyHtml', function() {
var options = {
removeComments: true, //清除HTML注释
collapseWhitespace: true, //压缩HTML为一行
collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
minifyJS: true, //压缩页面JS
minifyCSS: true //压缩页面CSS
};
return gulp.src(buildBasePath + '/**/*.html')
.pipe(gulpRemoveHtml()) //清除特定标签
.pipe(removeEmptyLines())
.pipe(removeEmptyLines({ removeComments: true })) //清除注释
.pipe(htmlmin(options))
.pipe(gulp.dest(buildBasePath))
.pipe(browserSync.reload({ stream: true }));
});
/** 压缩CSS */
gulp.task('minifyCss', function() {
return gulp.src('./app/assets/css/*.css')
//.pipe(rename({ suffix: '.min' }))
.pipe(cleanCSS({ debug: true }, function(details) {
console.log(details.name + ': ' + details.stats.originalSize);
console.log(details.name + ': ' + details.stats.minifiedSize);
}))
.pipe(concat('bundle.min.css')) //合并为一个文件
//.pipe(rev()) //添加md5
.pipe(gulp.dest(buildBasePath + '/assets/css'))
.pipe(browserSync.reload({ stream: true }));
});
/** 压缩JS */
gulp.task('minifyjsmd5', function() {
return gulp.src('./app/assets/**/*.js')
//.pipe(concat('bundle.min.js')) //合并压缩后的js为一个文件
//.pipe(uglify()) //压缩js到一行
//.pipe(rev()) //文件名加MD5后缀
.pipe(gulp.dest(buildBasePath + '/assets/'))
.pipe(browserSync.reload({ stream: true })); //输出到js目录
});
gulp.task('minifyJS', function() {
return gulp.src('./app/assets/js/**/*.js')
.pipe(ngAnnotate())
.pipe(concat('bundle.min.js'))
.pipe(uglify())
.pipe(gulp.dest(buildBasePath + '/assets/js'));
});
/** 压缩图片 */
gulp.task('minifyImg', function() {
return gulp.src('./app/assets/images/*')
.pipe(imagemin())
.pipe(gulp.dest(buildBasePath + '/assets/images'))
.pipe(browserSync.reload({ stream: true }));
});
/** Start Build Server Preview */
gulp.task('start:build', function() {
browserSync({
open: true,
port: '9001',
proxy: 'http://localhost/sites/JDBToolsPlatform/ProcessQualityReport/' + buildBasePath,
https: false,
});
});
/**
* 清除HTML中所有CSS JS引用
* <!-- build:css -->
* ......
* <!-- endbuild -->
* <!-- build:js -->
* ......
* <!-- endbuild -->
*/
//var autoInjectHTMLFiles = ['app/index.html', 'app/editor.html', 'app/reportdetails.html'];
gulp.task('autoInject', function() {
return gulp.src('app/**/*.html')
.pipe(htmlReplace({
'css': './assets/css/bundle.min.css',
'js': './assets/js/bundle.min.js'
}))
.pipe(gulp.dest(buildBasePath));
});
gulp.task('prod', function() {
runSequence('cleanBuild', 'copyVendor2prod', 'copyFavicon', 'minifyJS', 'minifyCss', 'minifyImg', 'autoInject', 'minifyHtml', 'start:build');
});

package.json文件📃:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
{
"name": "processqualityreport",
"version": "1.0.0",
"description": "xxxx质量分析",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"xx1",
"报告",
"分析"
],
"author": "Lomo",
"license": "ISC",
"dependencies": {
"bootstrap": "^3.3.7",
"bower": "^1.8.0",
"browser-sync": "^2.18.8",
"browserify": "^14.3.0",
"gulp": "^3.9.1",
"gulp-clean": "^0.3.2",
"gulp-clean-css": "^3.0.4",
"gulp-concat": "^2.6.1",
"gulp-eslint": "^3.0.0",
"gulp-html-replace": "^1.6.2",
"gulp-htmlmin": "^3.0.0",
"gulp-imagemin": "^3.2.0",
"gulp-jshint": "^2.0.4",
"gulp-linker": "^0.1.7",
"gulp-order": "^1.1.1",
"gulp-remove-empty-lines": "0.0.8",
"gulp-remove-html": "^1.3.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-rev": "^7.1.2",
"gulp-rev-collector": "^1.0.5",
"gulp-sequence": "^0.4.6",
"gulp-sync": "^0.1.4",
"gulp-sync-task": "^1.0.3",
"gulp-uglify": "^2.0.0",
"jshint": "^2.9.4",
"run-sequence": "^1.2.2",
"wiredep": "^4.0.0"
},
"devDependencies": {
"eslint": "^3.19.0",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-angular": "^2.4.0",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-standard": "^3.0.1",
"gulp-html-replace": "^1.6.2",
"gulp-inject": "^4.2.0",
"gulp-minify-css": "^1.2.4",
"gulp-ng-annotate": "^2.0.0",
"gulp-replace": "^0.5.4",
"stream-series": "^0.1.1"
}
}

执行gulp prod产生线上部署所需文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# build/assets> tree -L 2
├── css
│   └── bundle.min.css
├── images
│   ├── blog-placeholder-vertical.png
│   ├── hero-1.jpg
│   ├── hero-4.jpg
│   ├── image-in-content-1.jpg
│   ├── image-in-content-2.jpg
│   ├── jdb-zhifuhuanbifenxi.png
│   ├── jdb_blue_logo.png
│   ├── jdb_logo.png
│   ├── jdb_qa_process_intro--.png
│   ├── jdb_qa_process_intro.png
│   ├── jdb_qa_process_intro_backup.png
│   ├── jdb_qa_process_intro_nk.png
│   ├── login-background.jpg
│   └── placeholder.png
└── js
└── bundle.min.js

将自定义的CSS以及JS等压缩混淆并各自合并为一个单独的文件。图片进行一定程度的压缩。


Creative Commons License
本文由Lomo创作和发表,采用Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License进行许可.
转载请注明作者及出处,本文作者为Lomo,本文标题为gulp compress html/css/js.
Contents
  1. 1. Gulp使用
    1. 1.1. 安装
    2. 1.2. 打包压缩示例
      1. 1.2.1. 项目结构