0%

配置gulp

介绍 gulp

这里通过gulp实现的功能比较简单,就是将项目打包发布,因为通过http请求获得很多小文件的效率不如请求一个大文件,所以我们可以将所有的cssjs文件进行合并。

gulp可以给每次合并的jscss文件名后面跟上一个Hashcode,防止浏览器以为是一样的文件而不进行更新。

1. 给项目书写package.json

cd到项目根目录下,输入npm init

然后会要求输入一些初始化信息,除了名字需要小写外,其他暂时不需要写,直接enter就行,最后会产生一个package.json的文件

2. 安装gulp

我们需要在全局范围和项目下配置gulp环境,输入npm install -g gulp,然后输入gulp -v查看安装的gulp版本号以确认是否成功安装。

cd到项目根目录,输入npm install gulp --save-dev,给项目配置gulp

3. 下载gulp的插件

继续输入

1
npm install gulp-rev gulp-rev-replace gulp-useref gulp-filter gulp-uglify gulp-csso --save-dev

下载所需的插件。

package.json

安装的插件都会添加到package.json的生产环境中。

4. 书写插件的行为

在项目根目录下创建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
var gulp = require('gulp');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var useref = require('gulp-useref');
var filter = require('gulp-filter');
var uglify = require('gulp-uglify');
var csso = require('gulp-csso');

gulp.task('default',function () {
var jsFilter = filter('**/*.js',{restore:true});
var cssFilter = filter('**/*.css',{restore:true});
var indexHtmlFilter = filter(['**/*','!**/index.html'],{restore:true});

return gulp.src('src/index.html')
.pipe(useref())
.pipe(jsFilter)
.pipe(uglify())
.pipe(jsFilter.restore)
.pipe(cssFilter)
.pipe(csso())
.pipe(cssFilter.restore)
.pipe(indexHtmlFilter)
.pipe(rev())
.pipe(indexHtmlFilter.restore)
.pipe(revReplace())
.pipe(gulp.dest('dist'));
});

根据官方的要求,我们还需要在index.html页面引入cssjs的地方添加如下的注释代码

1
2
3
<!-- build:<type>(alternate search path) <path> <parameters> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->

例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
<!-- build:css css/combined.css -->
<link href="css/one.css" rel="stylesheet">
<link href="css/two.css" rel="stylesheet">
<!-- endbuild -->
</head>
<body>
<!-- build:js scripts/combined.js -->
<script type="text/javascript" src="scripts/one.js"></script>
<script type="text/javascript" src="scripts/two.js"></script>
<!-- endbuild -->
</body>
</html>

5. 执行gulp插件

之后在命令行输入gulp,就可以执行这些插件,会在根目录下生成dist的文件夹,里面有我们可以打包发布的文件。

-------------本文结束 感谢您的阅读-------------