简介:

使用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. Python GUI 背景色与语法高亮主题配置

    [补充] Python GUI 中 :ALT+P 可以重复上一条命令. ---------------------------------------------------------------- ...

  2. JS子父窗口互相操作取值赋值的方法介绍

    $("#父窗口元素ID",window.parent.document); 对应javascript版本为window.parent.document.getElementById ...

  3. Linux tcpdump命令详解

    tcpdump官网:http://www.tcpdump.org/ 转载于:http://www.cnblogs.com/ggjucheng/archive/2012/01/14/2322659.ht ...

  4. jquery实现前台倒计时。应用下单24小时后自动取消该订单

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  5. NSValue 类的使用

    NSValue对象是用来存储一个C或者Objective-C数据的简单容器.它可以保存任意类型的数据int,float,char等,也可以是指pointers, structures, and obj ...

  6. [转]DataURL与File,Blob,canvas对象之间的互相转换的Javascript

    来源 http://blog.csdn.net/cuixiping/article/details/45932793 canvas转换为dataURL (从canvas获取dataURL) var d ...

  7. UVA 11520 填充正方形

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  8. VBA中方法传参

    将变量做为参数传递给方法 Sub Test() Dim a As Integer a = Add a Debug.Print a '引用传递,a的值发生了变化,输出101 End Sub Functi ...

  9. RSA5、RSA6

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  10. 《与小卡特一起学Python》Code4 GUI easygui的使用

    EasyGui是基于TKinter的,所以可以跨平台使用. 使用方法很简单,下载之后解压把easygui.py放到python安装目录下的lib/site-packages/下面即可 import e ...