简介:

使用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. HDU 4289:Control(最小割)

    http://acm.hdu.edu.cn/showproblem.php?pid=4289 题意:有n个城市,m条无向边,小偷要从s点开始逃到d点,在每个城市安放监控的花费是sa[i],问最小花费可 ...

  2. js数组中indexOf/filter/forEach/map/reduce详解

    今天在网上看到一篇帖子,如题: 出处:前端开发博客 (http://caibaojian.com/5-array-methods.html) 在ES5中一共有9个Array方法,分别是: Array. ...

  3. JS IOS/iPhone的Safari不兼容Javascript中的Date()问题

    var date = new Date('2016-11-11 11:11:11'); document.write(date); 最近在写一个时间判断脚本,需要将固定好的字符串时间转换为时间戳进行比 ...

  4. 《编写可维护的JavaScript》——JavaScript编码规范(五)

    语句和表达式 在JavaScript中,诸如if和for之类的语句有两种写法,使用花括号的多行代码或者不使用花括号的单行代码.比如: //不好的写法,尽管这是合法的JavaScript代码 if (c ...

  5. 函数对象(仿函数 functor)

    简单地说,函数对象就是一个重载了()运算符的类实例,它可以像一个函数一样使用. #include <iostream> using namespace std; class Add { p ...

  6. 体验阿里云SSD云盘+ECS(I/O优化)的性能

    阿里云推出SSD云盘+I/O优化的ECS已有一段时间,这个功能优化可以为ECS服务器与SSD云盘提供更好的网络能力.据阿里云官网介绍,SSD云盘最高提供20000次随机读写IOPS.256MB/S吞吐 ...

  7. winform常用的属性(listview),常用容器(二者结合)

    ListVies控件主要用于展示数据(非常实用和重要的控件) FullRowSelect:设置是否行选择模式.(默认为false) (开启之后一下选中一行数据) ___________________ ...

  8. String常用方法测试

    String.Equals()使用方法 用来比较String两个对象所表示的字符串是否相同 public class StringEquals { public static void main(St ...

  9. C函数

    求阶乘 int fac(int a) { int i; ;i>;i--) a*=i; return a; }

  10. Intent四个重要属性

    Intent四个重要属性   Intent作为联系各Activity之间的纽带,其作用并不仅仅只限于简单的数据传递.通过其自带的属性,其实可以方便的完成很多较为复杂的操作.例如直接调用拨号功能.直接自 ...