简介:

使用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. HTML5的Video标签的属性,方法和事件汇总

    <video>标签的属性 src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览 ...

  2. Linux C 学习

    int main() { int64_t test = ; printf("%lld\n",test); float f_test = 100.2123; printf(" ...

  3. 精通AngularJS 读书笔记(2)

    AngularJS 速成 视图 因为AngularJS 依靠浏览器去解析模板,所以要保证模板是有效的HTML.尤其要小心闭合号HTML标签(未闭合好的标签不会产生任何错误信息,但会让视图不能正确渲染) ...

  4. angularjs的三目运算

    前言:前几天写代码的时候遇到一个问题,有一个按钮,有"已关注"和"+关注"两种状态,需要对这两种状态的按钮的背景颜色进行区分,单后点击"已关注&quo ...

  5. shell crontab执行结果不同问题处理

    shell脚本手工执行结果正确,但是放到crontab中执行,结果却是错误的. 脚本执行的路径肯定是没有问题的,比较怀疑crontab执行和手工执行两者的环境不同,在手工执行脚本时,通过ssh登录到服 ...

  6. ASP.NET Core 在 Swagger UI 中显示自定义的 Header Token

    Swagger 是个好东西,对于前后端分离的网站来说,不仅是提高前后端开发人员沟通效率的利器,也大大方便了后端人员测试 API.有时候,API 中可能需要在 Header 中设置认证参数,比如 aut ...

  7. Client Window坐标 RECT相关函数

    GetClientRect(HWND, RECT*) ---得到窗口的客户区大小,left,top总是0,bottom是客户区高度,right是客户区宽度 GetWindowRect(HWND, RE ...

  8. 2016年12月28日 星期三 --出埃及记 Exodus 21:23

    2016年12月28日 星期三 --出埃及记 Exodus 21:23 But if there is serious injury, you are to take life for life,若有 ...

  9. 高通android开发缩写

    1.TLMM MSM TLMM pinmux controller,Qualcomm MSM integrates a GPIO and Pin mux/config hardware, (TOP L ...

  10. 文本数据源Fields Format

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