gulp总结 - xiaduntian blog

GitHub地址：https://github.com/xiaqijian/gulp_study
建议上GitHub看，简书有些链接失效

如何使用

首先下载安装gulp


<! -- more -- >

$ npm i gulp -g

在本地建一个文件夹gulp_study

1
2
3

$ mkdir gulp_study

$ cd gulp_study

开始工作

建立配置文件，并安装本地gulp依赖

1
2
3

$ npm init

$ npm install gulp --save-dev

在gulp_study文件夹建立相关文件夹

文件结构为

gulp_study
    |
    |
    |--dist // 生成文件
    |
    |--src  //源码放的位置 
    |   |
    |   |--------js
    |   |---------css
    |   |-----img
    |   |-----less
    |   |-----index.html
    |
    |--gulpfile.js
    |
    |--package.json
    |

gulp处理文件分类

html
css
js
img

主要用到以下插件

gulp-uglify js文件压缩

gulp-rename 重命名

gulp-minify-css css压缩

gulp-less 编译less

gulp-autoprefixer 自动添加浏览器前缀

gulp-imagemin image 压缩

gulp.spritesmith img 雪碧图

gulp-minify-html html 压缩

gulp-concat 文件合并

gulp-babel 将es6编译成es5

gulp-sourcemaps

html [source]

html 主要还是进行代码压缩处理

var gulp = require('gulp')
var minifyHtml = require('gulp-minify-html')  // html压缩
gulp.task('minifyhtml', function(){
	gulp.src('src/index.html')
	.pipe(minifyHtml())
	.pipe(gulp.dest('dist'))
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
	<link rel="stylesheet" type="text/css" href="./css/style.css">
	<script type="text/javascript" src="./js/hello.js"></script>
</head>
<body>
	
</body>
</html>

运行

1	$ gulp minifyhtml

之后就可以在dist文件夹下面看到压缩好的index.html

css [source]

加载所需插件

var gulp = require('gulp');
var rename = require('gulp-rename'); // 重命名
var minifyCss = require('gulp-minify-css'); // css压缩
var autoprefixer = require('gulp-autoprefixer') // 自动添加浏览器前缀

css代码压缩处理

// css 压缩
gulp.task('minifycss', function(){
	gulp.src('src/css/*.css')
	.pipe(minifyCss())
	.pipe(gulp.dest('dist/css'))
});

css 添加浏览器前缀

// 自动添加浏览器前缀
gulp.task('autoprefixer', function(){
	gulp.src('src/css/*.css')
	.pipe(autoprefixer({
		browsers: ['last 2 versions', 'Android >= 4.0'],
            cascade: true, //是否美化属性值 默认：true 像这样：
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            remove:true //是否去掉不必要的前缀 默认：true 
	}))
	.pipe(gulp.dest('dist/css'))
});

css 重新命名

// css 重名
gulp.task('renamecss', function(){
	gulp.src('src/css/style.css')
	.pipe(rename('style.min.css'))
	.pipe(gulp.dest('dist/css'))
});

js [source]

js主要经行压缩，重命名, 合并文件, ES6 转换ES5

加载插件

var gulp = require('gulp');
var uglify = require('gulp-uglify'); // js文件压缩
var rename = require('gulp-rename'); // 重命名
var concat = require('gulp-concat'); // 文件合并
var babel = require('gulp-babel'); // ES6编译成ES5

压缩

// js文件压缩
gulp.task('uglify', function(){
	gulp.src('src/js/*.js')
	.pipe(uglify())
	.pipe(gulp.dest('dist/js'))
});

合并文件，重命名

// 重命名
gulp.task('rename', function(){
	gulp.src('src/js/hello.js')
	.pipe(rename('hello.min.js'))
	.pipe(gulp.dest('dist/js'))
})

// 文件合并
gulp.task('concat', function(){
	gulp.src('src/js/*.js')
	.pipe(concat('concat.js'))
	.pipe(uglify()) // 合并之后压缩
	.pipe(gulp.dest('dist/js'))
});

将ES6转换为ES5

// 再使用gulp-babel 之前需安装一下内容
// npm install gulp-babel babel-preset-2015 --save-dev
// 将ES6转换成ES5
gulp.task('es6', function(){
	gulp.src('src/js/es6.js')
	.pipe(babel())
	.pipe(gulp.dest('dist/js'))
});

img [source]

关于图片处理主要经行压缩，制作雪碧图