gulp构建工具整理

最新推荐文章于 2025-06-12 17:11:27 发布

原创最新推荐文章于 2025-06-12 17:11:27 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#合并 #压缩 #gulp

Workflow | Builder | Debugger 专栏收录该内容

16 篇文章

订阅专栏

gulp 是基于node 的一个构建工具 , 所谓构建工具是指通过简单配置就可以帮我们实现合并、压缩、校验、预处理等一系列任务的软件工具。常见的构建工具包括：Grunt、Gulp、Webpack 以及百度的F.I.S

下面我们来说下gulp ， gulp 提供插件的机制，不会产生臃肿，如果有需要再装上相应的插件就可以了。比如这个autoprefixer包，用于css自动添加前缀，其实，gulp不干什么事情，专门指挥它的插件干活。官方文档

安装

全局安装
- $ npm install -g gulp
本地安装
- $ npm install gulp –save-dev
- 本地安装是为了把gulp作为项目的依赖

创建gulpfile.js文件，定义一个任务，简单的示例：

// 文件开头，把gulp模块引入进来 , 以后在文章中的示例就不重复获取了
var gulp = require('gulp');
 gulp.task('default,function(){
     // 任务代码
 });

gulp 中常用到的插件和使用方式

自动添加前缀 autoprefixer

先安装 gulp-autoprefixer 包：
$ npm install gulp-autoprefixer –save-dev

开始使用

// 引入模块 autoprefixer 
var autoprefixer = require('gulp-autoprefixer');
// 创建一个名称为css的任务
gulp.task('css',function(){
    /* 获取需要构建的资源 如果有多个src需要传数组的形式，下面会有示例*/
    gulp.src('./css/*.css')
            /*通过管道的方式把资源以流的形式传递给autoprefixer来处理*/
            .pipe(autoprefixer())
            /* 再把处理结果通过管道传递给了gulp.dest() 方法，生成目标文件*/
            .pipe(gulp.dest('./dist'));
})

然后在bash或命令窗口中执行
$ gulp css

这里总结下几个函数的意思

gulp.task() 用于构建任务，去配置我们的具体任务

gulp.src()用于获取需要构建资源的路径
传递的参数必须是个路径，常见的配置项 {base:'./'} 

gulp.dest() 放置构建好的资源路径，传递参数也是一个路径

pipe() 是node中的管道，在这里是将上一步处理的结果传给下一步

合并js插件 gulp-concat

安装插件： $ npm install gulp-concat –save-dev

使用插件：

// 获取模块
var concat = require('gulp-concat');
// 创建任务
gulp.task('js',function(){
/*将当前js文件夹下的所有js文件获取到*/
gulp.src('./js/*.js')
        /*合并成app.js*/
        .pipe(concat('app.js'))
        /*输出到dist文件夹下*/
        .pipe(gulp.dest('./dist'))
})

执行命令
$ gulp js

图片压缩插件 gulp-imagemin

获取模块
$ npm install gulp-imagemin –save-dev

使用模块

var imagemin = require('gulp-imagemin');
gulp.task('image',function(){
gulp.src('./image/*')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist'));
})

执行任务
$ gulp image

压缩html插件 gulp-htmlmin

安装模块
$ npm install gulp-htmlmin

使用模块

 var htmlmin = require('gulp-htmlmin');
 gulp.task('html',function(){
    gulp.src('./*.html',{
                     "removeComments":true,
                     "collapseWhitespace":true,
                     "minifyJS":true
            })
        .pipe(htmlmin())
        .pipe(gulp.dest('./dist'));
 });

执行任务
$ gulp html

把文件名修改成hash值模块 gulp-rev

安装模块
$ npm install gulp-rev –save-dev

使用模块

var rev = require('gulp-rev');
gulp.task('rev',function(){
/* 下面 ** 的方式叫做global语法，表示目录下面的所有 */
gulp.src(['./dist/**/*.css','./dist/**/*.js','./dist/**/*'],{base:'./'})
        /* 转换成新的文件名 */
        .pipe(rev())
        .pipe(gulp.dest('./dist'))
        /*收集原文件名与新文件名的关系*/
        .pipe(rev.manifest())
        // 将文件以json的形式存在当前项目下的 ./rev 目录下
        .pipe(gulp.dest('./rev'));
});

执行任务
$ gulp rev

替换文件路径插件 gulp-rev-collector

安装模块
$ npm install gulp-rev-collector –save-dev

使用模块

var revCollector = require('gulp-rev-collector');
/* 使用这个模块，需要依赖rev任务，所以需要注入rev任务，如果不注入需要先执行rev任务 */
gulp.task('revCollector',['rev'],function(){
// 根据生成的json文件，去替换html里的路径
gulp.src(['./rev/*.json','./dist/*.html'])
       .pipe(revCollector())
       .pipe(gulp.dest('./dest'));
})

执行任务
$ gulp revCollector

优化gulp 命令

从上面看到，我们每每去执行一条任务，就要运行一条命令，这样显然是不合理的，所以我们需要进行优化。优化的方式就是任务注入以及 return 的使用
下面是优化的代码：

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var imagemin = require('gulp-imagemin');
var htmlmin = require('gulp-htmlmin');
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');
var uglify = require('gulp-uglify');

// 处理CSS
gulp.task('css', function () {
    return gulp.src('./css/*.css', {base: './'})
               .pipe(autoprefixer())
               .pipe(gulp.dest('./dist'));
});

// 此处就不做CSS压缩的演示了，原理相同。

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

// 压缩图片
gulp.task('image', function () {
    return gulp.src('./images/*', {base: './'})
               .pipe(imagemin())
               .pipe(gulp.dest('./dist'));
});

// 压缩html
gulp.task('html', function () {
    return gulp.src('./*.html')
               .pipe(htmlmin({
                   removeComments: true,
                   collapseWhitespace: true,
                   minifyJS: true
               }))
               .pipe(gulp.dest('./dist'));
});

// 生成hash文件名
gulp.task('rev',['css', 'js', 'image', 'html'], function () {
    // 其中加!前缀的是表示过滤该文件
    return gulp.src(['./dist/**/*', '!**/*.html'], {base: './dist'})
               .pipe(rev())
               .pipe(gulp.dest('./dist'))
               .pipe(rev.manifest())
               .pipe(gulp.dest('./rev'));
});

// 替换文件路径
gulp.task('revCollector',['rev'], function () {
    // 根据生成的json文件，去替换html里的路径
    return gulp.src(['./rev/*.json', './dist/*.html'])
               .pipe(revCollector())
               .pipe(gulp.dest('./dist'));
});
// gulp中默认以default为任务名称
gulp.task('default', ['revCollector']);

执行任务 , 在命令行中，我们只需要执行下面的命令
$ gulp
或者是
$ gulp default
就可以对项目进行构建了。

上面只是简单的演示了一下，还有很多问题存在，比如合并js的时候，使用 gulp-concat 生成的新js里面，原来html里面并没有引用，还需要使用gulp-inject 来将生成的js注入到html，还有很多东西要学习。

常用插件

Gulp-uglify
Gulp-autoprefixer
Gulp-htmlmin
Gulp-less
Gulp-livereload
Gulp-minify-css
Gulp-imagemin
Gulp-concat
gulp-rev
gulp-rev-collector
gulp-clean
gulp-inject

gulp插件库：
http://gulpjs.com/plugins/

找到一些学习的网站：
http://cnodejs.org/topic/5551a6067664e06d7cd4718f
http://www.ydcss.com/archives/83
http://www.gowhich.com/blog/621