gulp 实例 demo

发表于   |   分类于   |     |   阅读次数

今天专门拿一个小页面来当 demo 来测试一下 gulp 的实际应用。过程中自然是各种小问题陆续呈现、各种自我需求不断促使去完善。目前折腾出一个为自己所需的、较为完整的 demo ，准备当作后续模板改编应用。

走一次顺序：

局部安装

新建目录 gulp_test ，并在该目录下局部安装 gulp ：

1
npm install gulp --save-dev

局部安装完后，目录 gulp_test 下出现文件夹 node_modules 。

安装插件

所需要的插件简介：

1
2
3
4
5
6
7
8
9
10
11
//引入组件
var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),        //图片压缩
    // sass = require('gulp-ruby-sass'),          //sass
    minifycss = require('gulp-minify-css'),    //css压缩
    // jshint = require('gulp-jshint'),           //js检查
    uglify = require('gulp-uglify'),          //js压缩
    rename = require('gulp-rename'),           //重命名
    concat = require('gulp-concat'),          //合并文件
    clean = require('gulp-clean');            //清空文件夹
    htmlmin = require('gulp-htmlmin');        //html 处理

目录 gulp_test 下安装插件：

1
npm install gulp-minify-css gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-rename gulp-htmlmin --save-dev

安装完插件后，目录 node_modules 下多了7个插件的相应文件夹。

创建项目目录结构

  1. 在项目根目录 gulp_test 下，新建 gulpfile.js 文件；
  2. 在项目根目录 gulp_test 下，新建文件夹 src ,用于存放生产环境代码，并把自己的项目代码放进去；
  3. 在项目根目录 gulp_test 下，新建文件夹 dist ,用于存放被 gulp 处理过的发布环境代码；
    此时的项目代码结构为：

gulp 目录结构

编辑 gulpfile.js 文件

直接上 code ，里面有详细注释：

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
//引入组件
var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),        //图片压缩
    // sass = require('gulp-ruby-sass'),          //sass
    minifycss = require('gulp-minify-css'),    //css压缩
    // jshint = require('gulp-jshint'),           //js检查
    uglify = require('gulp-uglify'),          //js压缩
    rename = require('gulp-rename'),           //重命名
    concat = require('gulp-concat'),          //合并文件
    clean = require('gulp-clean');            //清空文件夹
    htmlmin = require('gulp-htmlmin');        //html 处理
//css 压缩
gulp.task('minifycss',function() {
    var cssSrc = './src/css/*.css',
        cssDst = './dist/css';
    return gulp.src(cssSrc)                  //被压缩的文件
        .pipe(rename({ suffix: '.min' }))
        .pipe(minifycss())                       //执行压缩
        .pipe(gulp.dest(cssDst));        //输出文件夹
});
// 图片处理
gulp.task('imagemin',function(){
    var imgSrc = './src/images/*',
        imgDst = './dist/images';
    return gulp.src(imgSrc)
        .pipe(imagemin())
        .pipe(gulp.dest(imgDst));
});
// js处理
gulp.task('uglify',function () {
    var jsSrc = './src/js/*.js',
        jsDst ='./dist/js';
    return gulp.src(jsSrc)
        /*.pipe(jshint('.jshintrc'))
        .pipe(jshint.reporter('default'))*/
        // .pipe(concat('main.js'))
        // .pipe(gulp.dest(jsDst))
        .pipe(rename({ suffix: '.min' }))
        .pipe(uglify())
        .pipe(gulp.dest(jsDst));
});
//html 处理
gulp.task('htmlmin', 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
    };
    var htmlSrc = './src/*.html',
        htmlDst = './dist';
    gulp.src(htmlSrc)
        .pipe(htmlmin(options))
        .pipe(gulp.dest(htmlDst));//同名的html,会直接替换
});
// clean被执行时,先清空对应目录下图片、样式、js
gulp.task('clean',function() {
    return gulp.src(['./dist/css', './dist/js', './dist/images'], {read: false})
        .pipe(clean());
});
//watch
// gulp.watch('./src/css/*.css', ['minifycss']);
gulp.task('watch',function(){
    //css
    gulp.watch('./src/css/*.css', ['minifycss']);
    //css
    gulp.watch('./src/js/*.js', ['uglify']);
    //css
    gulp.watch('./src/images/*', ['imagemin']);
    //css
    gulp.watch('./src/*.html', ['htmlmin']);
});
// 默认预设任务 清空图片、样式、js并重建 运行语句 gulp
gulp.task('default', ['clean'],function(){
    gulp.start('minifycss','uglify','imagemin','htmlmin','watch');
});

执行 gulp

在根目录下，执行命令：

1
gulp

成功之后，会在 dist 文件夹下生成已经被处理过各文件；
命令行显示如下、并且一直监视 watch 着指定的文件是否改动保存过：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
guojc@LAPTOP-LJ1HC4HN /F/GulpProjects/gulp_test
$ gulp
[22:41:55] Using gulpfile f:\GulpProjects\gulp_test\gulpfile.js
[22:41:55] Starting 'clean'...
[22:41:55] Finished 'clean' after 16 ms
[22:41:55] Starting 'default'...
[22:41:55] Starting 'minifycss'...
[22:41:55] Starting 'uglify'...
[22:41:55] Starting 'imagemin'...
[22:41:55] Starting 'htmlmin'...
[22:41:55] Finished 'htmlmin' after 2.17 ms
[22:41:55] Starting 'watch'...
[22:41:55] Finished 'watch' after 39 ms
[22:41:55] Finished 'default' after 59 ms
[22:41:57] Finished 'minifycss' after 1.45 s
[22:41:57] Finished 'uglify' after 1.55 s
[22:41:57] gulp-imagemin: Minified 17 images (saved 22.24 kB - 43%)
[22:41:57] Finished 'imagemin' after 2.09 s

此时的目录结构，原本为空的文件夹 dist 目录，里面出现了被 gulp 处理过各文件。

遇到的一些问题

  • 各任务 task 是异步执行的，出现过报错，大概是文件不存在、无法处理；只要在各任务 task 的 pipe管道 前加上 return 即可。
  • 将多个监视放在一个任务 task里面时，忘记把该名为 watch 的任务 task 放在：默认预设任务 default 的数组里面；导致文件修改保存后没被监视到。
  • 注意 dist 和 src 中代码里的引用的路径、文件名的问题。

更多 gulp 的使用，还得继续在实践应用中摸索啦！