192.gulp-concat插件合并多个文件

因为在网页的开发中,为了加快网页渲染的速度,如果我们的js文件比较多的话,就可以使用gulp-concat插件,将多个js文件合并成一个文件,该插件的安装同样是在终端窗口执行命令:npm install gulp-concat --save-dev.
示例代码如下(1):
var gulp = require('gulp');
var concat = require('concat');
var uglify = require('uglify');

gulp.task('js', function() {
    gulp.src(['./js/index.js', './js/nav.js'])
     //将文件合并成一个index.js文件
    .pipe(concat('index.js'))
   // 将文件进行丑化处理
    .pipe(uglify({
        'toplevel':true,
        'compress': {
            'drop_console': true,
            'drop_debugger': true,
        }
    }))
    //为文件进行重命名
    .pipe(rename({'suffix': '.min'}))
    .pipe(gulp.dest('./dist/js/'))
});
示例代码如下(2):
var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    pipeline = require('readable-stream').pipeline;

gulp.task('js02', function() {
    return pipeline(
        gulp.src(['./js/index.js','./js/nav.js']),
        concat('index.js'),
        //压缩主要是依靠uglify()函数;
        uglify(),
        rename({
            'suffix': '.min',
        }),
        gulp.dest('./dist/js/')
    )
});

原文地址:https://www.cnblogs.com/guyan-2020/p/12387362.html

时间: 2024-10-21 15:26:07

192.gulp-concat插件合并多个文件的相关文章

gulp插件实现压缩一个文件夹下不同目录下的js文件(支持es6)

gulp-uglify:压缩js大小,只支持es5 安装: cnpm: cnpm i gulp-uglify -D yarn: yarn add gulp-uglify -D 使用: 代码实现1:压缩js文件夹下的index.js文件输出到dist文件夹下面(注意要压缩的js文件中此处只能使用es5) 1 var gulp = require('gulp'); 2 var uglify = require('gulp-uglify'); 3 4 gulp.task("uglify",f

使用gulp压缩并合并AngularJS代码

我们的移动web项目使用gulp作为自动化部署工具,由于移动设备4G流量费比较贵,一般我们做移动Web App项目正式发布时都需要把js代码进行压缩以便节省流量.包括使用的第三方js框架,正式发布时也应该使用压缩后的版本.对于自己写的js代码,因为现在是模块化开发,js文件比较多,需要先合并成一个文件后,去除log,进行压缩,基于gulp的管道式命令,实现这些还是很容易的.部分代码如下: var gulp = require('gulp'); var gutil = require('gulp-

精通gulp常用插件

匹配符 *.**.!.{} gulp.src('./js/*.js')               // * 匹配js文件夹下所有.js格式的文件gulp.src('./js/**/*.js')            // ** 匹配js文件夹的0个或多个子文件夹gulp.src(['./js/*.js','!./js/index.js'])    // ! 匹配除了index.js之外的所有js文件gulp.src('./js/**/{omui,common}.js')        // {

gulp plugins 插件介绍

原文:http://ju.outofmemory.cn/entry/103253 鸟窝 2014-11-28 3020 阅读 gulp Gulp是一个构建工具, 功能类似grunt, 以及Java生态圈的ant, maven, gradle等. 其它的javascript生态圈的构建工具可以参考: List of JavaScript Build Tools它采用了一种流式处理的方式, 编写起来简单直观. 相对于其它javascript构建工具, 母亲啊它的star数是仅次于grunt,流行度还

gulp常用插件

匹配符 *.**.!.{} gulp.src('./js/*.js') // * 匹配js文件夹下所有.js格式的文件 gulp.src('./js/**/*.js') // ** 匹配js文件夹的0个或多个子文件夹 gulp.src(['./js/*.js','!./js/index.js']) // ! 匹配除了index.js之外的所有js文件 gulp.src('./js/**/{omui,common}.js') // {} 匹配{}里的文件名 文件操作 del (替代gulp-cle

Grunt入门教程之二 —— concat插件

Grunt入门教程之二 Concat插件 concat是grunt中用来做文件连接的常用插件,比如说你写了一个类库,有三大模块,如: a.js b.js c.js 当你的项目准备发布的时候,你可能需要将这三个模块合并成一个大的模块all.js,这样做可以减少HTTP请求,增快页面的响应速度. 如果我们每次发布的时候又要连接这三个模块,并测试all.js,确保大模块无BUG之后再发布,就显得很蛋疼了.一种好的方式是,每当你修改了其中一个小模块,他都会自动连接成all.js,并且你的项目在开发的时候

gulp自动化压缩合并、加版本号解决方案

虽然网上有很多的 gulp 构建文章,但是很多都已经随着 gulp 插件的更新无法运行了.因此,我写了这个比较简单的构建方案. 如果还不熟悉 gulp 的插件,可以阅读上一篇文章:精通gulp常用插件 这个方案主要是为了实现js/css的压缩合并.自动添加版本号和压缩html. gulp-csso 压缩优化css gulp-uglify 压缩js gulp-html-minify 压缩html gulp-rev-all 生成版本号 主要通过上面插件实现功能,其他插件配合使用. // gulpfi

gulp常用插件之gulp-sourcemaps使用

更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-sourcemaps这是一款用来生成映射文件的一个插件,SourceMap 文件记录了一个存储源代码与编译代码对应位置映射的信息文件.我们在调试时都是没办法像调试源码般轻松,这就需要 SourceMap 帮助我们在控制台中转换成源码,从而进行 debug. gulp-sourcemaps在前端的工作中主要是用来解决以下三个方面出现的 debug 问题: 代码压缩混淆后 利用 sass .typeScript 等其他语言编译成 css

gulp常用插件之gulp-useref使用

更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-useref这是一款可以将HTML引用的多个CSS和JS合并起来,减小依赖的文件个数,从而减少浏览器发起的请求次数.gulp-useref根据注释将HTML中需要合并压缩的区块找出来,对区块内的所有文件进行合并.注意:它只负责合并,不负责压缩!,如果需要做其他操作,可以配合gulp-if插件使用. 更多使用文档请点击访问gulp-useref工具官网. 安装 一键安装不多解释 npm install --save-dev gulp-