当前位置: 首页 » 前端开发 » gulp简单应用
字号调整:

gulp简单应用

haibao 前端开发 2016-06-07 12:00:09 817 百度已收录
本文最后更新于2016-06-07,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!
历史上的今天:9月19日 - 1928年,米老鼠首次亮相

凌晨好, 本文除去代码部分,共2461个字,预计阅读时间需要7分钟。

今天用gulp写了一个demo,为了实现指定目录下的一些功能,比如:less编译成css, 编译后的css压缩,js压缩,防缓存,替换html中对应的css,js文件等。

目录结构如下:

开始做之前,请确保你的电脑已经安装NodeJS和相关依赖工具(参考package.json),然后自己npm install一下即可。

下面列出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
{
  "name": "gulp",
  "description": "gulp html files",
  "version": "0.0.1",
  "main": "gulpfile.js",
  "scripts": {
    "start": "gulp"
  },
  "author": {
    "name": "haibao",
    "email": "hhb219@163.com",
    "url": "http://www.hehaibao.com"
  },
  "license": "MIT",
  "dependencies": {
    "gulp": "3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-less": "^3.1.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^1.2.2",
    "gulp-rev": "^7.0.0",
    "gulp-rev-replace": "^0.4.3",
    "gulp-uglify": "^1.5.3",
    "gulp-util": "^3.0.7",
    "through2": "^2.0.1"
  }
}

相关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
/*
 *  gulp 自动化构建工具
 *  by haibao[http://www.hehaibao.com]
 *  @update: 2016/06/07
 *  命令行:gulp
 *
 * */
var base_path = 'QWWAP_BETA';
var gulp = require('gulp'),
    less = require('gulp-less'),                  //- less编译成css
    minifyCss = require('gulp-minify-css'),       //- 压缩CSS
    uglify = require('gulp-uglify'),              //- 压缩JS
    rename = require('gulp-rename'),              //- 重命名
    rev = require('gulp-rev'),                    //- 对文件名加MD5后缀
    revReplace = require('gulp-rev-replace'),     //- 路径替换
    clean = require('gulp-clean');                //- 清空文件夹
 
//清空匹配的css
gulp.task('clean-css', function () {
    return gulp.src(base_path+'/**/css/*'+'-'+'*.css', { read: false })
        .pipe(clean());
});
 
//编译less & 压缩css
gulp.task('less', ['clean-css'], function() {
    var streamForLess = gulp.src(base_path+'/**/css/*.less', { base:base_path })
        .pipe(rev())                                 //- 文件名加MD5后缀
        .pipe(less())                                //- 编译less成css
        .pipe(rename({ suffix: '.min' }))            //- 重命名文件
        .pipe(minifyCss())                           //- 压缩处理成一行
        .pipe(gulp.dest(base_path))                  //- 输出文件本地
        .pipe(rev.manifest('rev-manifest-css.json')) //- 生成一个json
        .pipe(gulp.dest(base_path));
    return streamForLess;
});
 
//清空匹配的js
gulp.task('clean-scripts', function () {
    return gulp.src(base_path+'/**/js/*'+'-'+'*.js', {read: false})
        .pipe(clean());
});
 
//压缩js
gulp.task('script', ['clean-scripts'], function() {
    var streamForJs = gulp.src(base_path+'/**/js/*.js', { base:base_path })
        .pipe(rev())                                 //- 文件名加MD5后缀
        .pipe(uglify())                              //- 压缩JS
        .pipe(gulp.dest(base_path))                  //- 输出文件本地
        .pipe(rev.manifest('rev-manifest-js.json'))  //- 生成一个json
        .pipe(gulp.dest(base_path));
    return streamForJs;
});
 
//替换html中的css & js
gulp.task('build', ['less','script'], function() {
    var manifest = gulp.src(base_path+'/*.json');
    return gulp.src(base_path+'/**/html/*.html')    //- 读取 rev-manifest-*.json 文件以及需要进行css/js名替换的文件
        .pipe(revReplace({ manifest: manifest }))    //- 执行文件内css/js名的替换
        .pipe(gulp.dest(base_path));
});
 
//监听任务
gulp.task('watch', function(){
    gulp.watch(base_path+'/**/css/*.less', ['build']); // 监听less
});
 
//预设任务
gulp.task('default', ['build', 'watch']);

至此,简单的gulp就实现了,至于后期的优化什么的,这里就不贴出来了。有兴趣可以自行研究研究。

好了,本篇完~ 就是这么水~~

本文标题:gulp简单应用

本文地址:http://www.hehaibao.com/gulp-demo/

版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!

发表评论

电子邮件地址不会被公开。 必填项已用*标注