zoukankan      html  css  js  c++  java
  • 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/')
        )
    });
    
    始于才华,忠于颜值;每件事情在成功之前,看起来都是天方夜谭。一无所有,就是无所不能。
  • 相关阅读:
    Vue组件
    Vue表单修饰符(lazy,number,trim)
    Vue-表单输入绑定
    Vue-为什么在 HTML 中监听事件?
    Vue-鼠标按键修饰符
    Vue-系统修饰键
    Vue--按键修饰符(逐个学习按键修饰符)
    Vue--事件处理(逐个学习事件修饰符)
    Vue--事件处理
    Vue:列表渲染 v-for on a <template>
  • 原文地址:https://www.cnblogs.com/guyan-2020/p/12387362.html
Copyright © 2011-2022 走看看