简介:

使用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. php变量 写时改变 写时复制

    写时复制 $var = 1; $var2 = $var; #此时$var2 与 $var 指向同一个zval refcount = 2: $var = 2; # 此时$val 改变 所以 $var 与 ...

  2. [DataBase] MongoDB (7) MongoDB 索引

    MongoDB 索引 1. 建立索引 唯一索引db.passport.ensureIndex( {"loginname": 1}, {"unique": tru ...

  3. 复旦大学2015--2016学年第一学期(15级)高等代数I期末考试第八大题解答

    八.(本题10分)  设 $V$ 为数域 $K$ 上的 $n$ 维线性空间, $\varphi$ 为 $V$ 上的线性变换. 子空间 $C(\varphi,\alpha)=L(\alpha,\varp ...

  4. MySQL新建用户,授权,删除用户,修改密码

    首先要声明一下:一般情况下,修改MySQL密码,授权,是需要有mysql里的root权限的.注:本操作是在WIN命令提示符下,phpMyAdmin同样适用.    用户:phplamp  用户数据库: ...

  5. Javascript运用函数计算正方形的面积

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

  6. 关于phpcms 万一忘记密码怎么破?

    莫慌~海洋小生教你~我也是偷偷学来的,呀哈哈哈! first:............................你就认命吧!哈哈哈... 开玩笑开玩笑! LOOK HERE ↓: 1.在没有安装 ...

  7. java.lang.ExceptionInInitializerError /NoClassDefFoundError: [Lorg/hibernate/engine/FilterDefinition;

    java.lang.ExceptionInInitializerError at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Nati ...

  8. Mac系统下配置Tomcat

    1.下载Tomcat,网址:http://tomcat.apache.org/download-70.cgi: 2.进入终端Terminal,打开配置文件.bash_profile,输入open .b ...

  9. python成长之路【第十一篇】:网络编程之线程threading模块

    一.threading模块介绍 threading 模块建立在 _thread 模块之上.thread 模块以低级.原始的方式来处理和控制线程,而 threading 模块通过对 thread 进行二 ...

  10. Linux-ubuntu指令使用积累(长期更新)

    alias cat cd cp ls mkdir mv rm sudo tar chmod       1. sudo 系统管理指令.放在其它指令之前使用,允许普通用户在root权限下执行部分或者全部 ...