美文网首页每天五分钟之IT技能包
gulp插件(7) - gulp-concat(文件合并)

gulp插件(7) - gulp-concat(文件合并)

作者: 学好该死的程序 | 来源:发表于2017-10-25 12:38 被阅读3次

    功能描述

    合并文件,减少网络请求。


    插件安装

    $ cnpm install gulp-concat --save-dev
    

    使用方法

    例1:基本使用

    var gulp   = require('gulp'),
        concat = require('gulp-concat'),
        pump   = require('pump');
     
    gulp.task('testConcat', function (cb) {
        pump([
            gulp.src('src/js/*.js'),
            concat('all.js'),//合并后的文件名
            gulp.dest('dist/js');
        ], cb);
    });
    

    例2:与插件gulp-less(不会用?请参考),gulp-clean-css(不会用?请参考)组合使用,实现将项目中的框架less整合成一个文件app.min.css

    var gulp      = require('gulp'),
        concat    = require('gulp-concat'),
        less      = require('gulp-less'),
        minifyCss = require('gulp-clean-css'),
        rename    = require('gulp-rename'),
        pump      = require('pump');
     
    gulp.task('testConcat', function (cb) {
        pump([
            gulp.src('src/less/app/*.less'),
            less(),                    // 编译
            concat('app.css'),         // 合并
            minifyCss(),               // 压缩
            rename({suffix: '.min'}),  // 更名
            gulp.dest('dist/js');
        ], cb);
    });
    

    例3: JS文件的压缩合并,可以作为练习题

    相关文章

      网友评论

        本文标题:gulp插件(7) - gulp-concat(文件合并)

        本文链接:https://www.haomeiwen.com/subject/kfrqpxtx.html