gulp教程之插件

gulp常见插件

NPM官网

gulp-uglify

1.gulp-uglify 使用gulp-uglify压缩javascript文件,减小文件大小。

利用 npm 先安装 gulp-uglify :

1
npm install --save-dev gulp-uglify

安装之后,在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
var gulp= require('gulp'),
uglify= require("gulp-uglify");

gulp.task('minify-js', function () {
gulp.src('js/*.js') // 要压缩的js文件
.pipe(uglify())
.pipe(gulp.dest('dist/js')); //压缩后的路径
});

###压缩多个文件
var gulp= require('gulp'),
uglify= require('gulp-uglify');

gulp.task('jsmin', function () {
//多个文件以数组形式传入
gulp.src(['src/js/index.js','src/js/detail.js'])
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});

vargulp= require('gulp'),
uglify= require('gulp-uglify');

##匹配符“!”,“*”,“**”,“{}”
gulp.task('jsmin', function () {
//压缩src/js目录下的所有js文件
//除了test1.js和test2.js(**匹配src/js的0个或多个子文件夹)
gulp.src(['src/js/*.js', '!src/js/**/{test1,test2}.js'])
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});

gulp-rename

2.gulp-rename 用来重命名文件流中的文件。用 gulp.dest() 方法写入文件时,文件名使用的是文件流中的文件名,如果要想改变文件名,那可以在之前用 gulp-rename 插件来改变文件流中的文件名。

1
npm install--save-dev gulp-rename

运用

1
2
3
4
5
6
7
8
9
10
11
var gulp= require('gulp'),
rename= require('gulp-rename'),
uglify= require("gulp-uglify");

gulp.task('rename', function () {
gulp.src('js/jquery.js')
.pipe(uglify()) //压缩
//会将jquery.js重命名为jquery.min.js
.pipe(rename('jquery.min.js'))
.pipe(gulp.dest('js'));
});

gulp-minify-css

3.gulp-minify-css 压缩css文件时并给引用url添加版本号避免缓存:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
npm install--save-dev gulp-minify-css
//简单运用:

var gulp= require('gulp'),
cssmin= require('gulp-minify-css');
//确保已本地安装gulp-make-css-url-version [npm install gulp-make-css-url-version --save-dev]
cssver= require('gulp-make-css-url-version');

gulp.task('testCssmin', function () {
gulp.src('src/css/*.css')
.pipe(cssver()) //给css文件里引用文件加版本号(文件MD5)
.pipe(cssmin())
.pipe(gulp.dest('dist/css'));
});

gulp-htmlmin

4.gulp-htmlmin 使用gulp-htmlmin压缩html,可以压缩页面javascript、css,去除页面空格、注释,删除多余属性等操作。

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
npm install--save-dev gulp-htmlmin
//简单使用:

var gulp= require('gulp'),
htmlmin= require('gulp-htmlmin');

gulp.task('testHtmlmin', function () {
varoptions= {
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
//省略布尔属性的值 <input checked="true"/> ==> <input />
collapseBooleanAttributes: true,
//删除所有空格作属性值 <input id="" /> ==> <input />
removeEmptyAttributes: true,
//删除<script>的type="text/javascript"
removeScriptTypeAttributes: true,
//删除<style>和<link>的type="text/css"
removeStyleLinkTypeAttributes: true,
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
};
gulp.src('src/html/*.html')
.pipe(htmlmin(options))
.pipe(gulp.dest('dist/html'));
});

gulp-concat

5.gulp-concat 用来把多个文件合并为一个文件,我们可以用它来合并js或css文件等,这样就能减少页面的http请求数了.

1
2
3
4
5
6
7
8
9
10
11
npm install--save-dev gulp-concat
//简单使用:

var gulp= require('gulp'),
concat= require("gulp-concat");

gulp.task('concat', function () {
gulp.src('js/*.js') //要合并的文件
.pipe(concat('all.js')) // 合并匹配到的js文件并命名为 "all.js"
.pipe(gulp.dest('dist/js'));
});
坚持原创技术分享,您的支持将鼓励我继续创作!