简介:

使用gulp-concat合并javascript文件,减少网络请求。

1、安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件

1.1、gulp基本使用还未掌握?请参看: gulp详细入门教程

1.2、本示例目录结构如下:

2、本地安装gulp-concat

2.1、github:https://github.com/wearefractal/gulp-concat

2.2、安装:命令提示符执行 cnpm install gulp-concat --save-dev

2.3、注意:没有安装cnpm请使用 npm install gulp-concat --save-dev。 什么是cnpm,如何安装?

2.4、说明:--save-dev 保存配置信息至 package.json 的 devDependencies 节点。为什么要保存至package.json?

3、配置gulpfile.js

3.1、基本使用

JavaScript
 
1
2
3
4
5
6
7
8
var gulp = require('gulp'),
    concat = require('gulp-concat');
 
gulp.task('testConcat', function () {
    gulp.src('src/js/*.js')
        .pipe(concat('all.js'))//合并后的文件名
        .pipe(gulp.dest('dist/js'));
});

命令提示符执行:gulp testConcat

http://www.ydcss.com/archives/83

gulp教程之gulp-concat的更多相关文章

  1. gulp教程之gulp中文API

    1.gulp.src(globs[, options]) 1.1.说明:src方法是指定需要处理的源文件的路径,gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入 ...

  2. gulp教程之gulp-autoprefixer<转>

    简介: 使用gulp-autoprefixer根据设置浏览器版本自动处理浏览器前缀.使用她我们可以很潇洒地写代码,不必考虑各浏览器兼容前缀.[特别是开发移动端页面时,就能充分体现它的优势.例如兼容性不 ...

  3. gulp教程之gulp-less

    简介: 使用gulp-less插件将less文件编译成css,当有less文件发生改变自动编译less,并保证less语法错误或出现异常时能正常工作并提示错误信息. 1.安装nodejs/全局安装gu ...

  4. gulp教程之gulp-htmlmin

    简介: 使用gulp-htmlmin压缩html,可以压缩页面javascript.css,去除页面空格.注释,删除多余属性等操作. 1.安装nodejs/全局安装gulp/本地安装gulp/创建pa ...

  5. gulp教程之gulp-minify-css

    简介: 使用gulp-minify-css压缩css文件,减小文件大小,并给引用url添加版本号避免缓存.重要:gulp-minify-css已经被废弃,请使用gulp-clean-css,用法一致. ...

  6. gulp教程之gulp-imagemin

    简介: 使用gulp-imagemin压缩图片文件(包括PNG.JPEG.GIF和SVG图片) 1.安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile ...

  7. gulp教程之gulp-rev-append

    简介: 使用gulp-rev-append给页面的引用添加版本号,清除页面引用缓存. 1.安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 ...

  8. gulp教程之gulp-uglify

    简介: 使用gulp-uglify压缩javascript文件,减小文件大小. 1.安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 1. ...

  9. gulp教程之gulp-livereload

    简介: gulp-livereload拯救F5!当监听文件发生变化时,浏览器自动刷新页面.[事实上也不全是完全刷新,例如修改css的时候,不是整个页面刷新,而是将修改的样式植入浏览器,非常方便.]特别 ...

随机推荐

  1. C# Winform中DataGridView绑定后DataGridViewCheckBoxColumn无法显示的问题

    在控件DataGridView绑定数据源后,发现DataGridViewCheckBoxColumn不能显示当前的check值.经过一番努力,现将完整代码奉献出来,仅供参考. 错误代码: /*禁止自动 ...

  2. 20160712001 SQL server R2 更名

    use mastergoselect @@servername;select serverproperty('servername') sp_dropserver 'BPM-SERVER'gosp_a ...

  3. Android 启动多个闹钟。

    Intent i=new Intent(TimeSetActivity.this,AlarmReceiver.class); PendingIntent pi = PendingIntent.getB ...

  4. 2.[WP Developer体验Andriod开发]Andriod Studio结合Visual Studio Emulator for Android调试Android App

    0. 工欲善其事必先利其器 上一篇博客对比了一下Android和WinPhnoe的布局容器,后续篇章重点放在Android的开发上了. 说到开发就绕不开调试程序,调试Android App我们有2种选 ...

  5. Hibernate之全面认识

    Hibernate体系架构 Hibernate通过配置文件管理底层的JDBC连接,将用户从原始的JDBC释放出来,使得用户无需再关注底层的JDBC操作,而是以面向对象的方式进行持久化操作.这种全面的解 ...

  6. 新版macbook air OS X El Capitan 10.11安装WIN找不到驱动介质???

    这个问题已经解决 首先进入Boot Camp6 以后 顶上会有一个操作 -下载windowns 驱动程序 保存在优盘里面.然后再分区选择ISO(中间和你前面做的一样)电脑重启进入WIN安装 到你们出现 ...

  7. 【前端】提取URL中的各个GET参数

    /**************************** * 有这样一个URL:http://item.taobao.com/item.htm?a=1&b=2&c=&d=xx ...

  8. 字符串处理总结之二(C#StringBuilder类)

    动态串StringBuilder 与String类相比,System.Text.StringBuilder类可以实现动态字符串.此外,动态的含义是指在修改字符串时,系统不需要创建新的对象,不会重复开辟 ...

  9. dsp28377控制DM9000收发数据

    首先感谢上一篇转载文章的作者给出的参考,下面是一些自己在调试过程中的一些步骤: 首先把代码贴上来: //------------------------------------------------ ...

  10. CSS下拉列表错误纠正

    上一篇关于CSS制作下来列表的错误纠正. 在上一篇中,用CSS只做了下拉列表,但是鼠标不放在导航栏上的时候,下拉列表也是出来的.具体错误就是 div ul{ list-style:none; max- ...