在上一篇里成功安装了gulp到项目中,现在来测试一下gulp的合并与压缩功能

gulp入坑系列(1)——安装gulp(传送门):http://www.cnblogs.com/YuuyaRin/p/6159809.html

在之前建立的项目中写入,在根目录新建js文件夹,并在文件夹中新建两个js文件,代码如下:

index.js:

  1. var index={};
  2. index={
  3. test:function(argument){
  4. console.log('test');
  5. }
  6. }
  7. index.test();

main.js:

  1. var main = {};
  2. main.test=function(argument){
  3. console.log("main test");
  4. }
  5. main.test();

在根目录新建文件夹build,并在build里新建一个空的js文件:all.min.js

在根目录下新建index.html ,在其中引用build下的all.min.js。

index.html:

  1. <script type="text/javascript" src="build/all.min.js"></script>

接下来编辑gulpfile.js文件,来告诉gulp我们要把index.js,main.js合并起来压缩再写入all.min.js中

gulpfile.js:

  1. var gulp = require('gulp');//gulp自身
  2. var uglify= require('gulp-uglify');//<span style="font-family: Arial, Helvetica, sans-serif;">引入压缩组件</span>
  3. var concat = require('gulp-concat');//<span style="font-family: Arial, Helvetica, sans-serif;">引入合并组建</span>
  4. var paths = {
  5. scripts:['js/index.js','js/main.js']
  6. } //定义要操作的文件路径
  7. gulp.task('default', function() {
  8. gulp.src(paths.script)//找到项目下paths变量所定义的script文件
  9. .pipe(uglify())//压缩
  10. .pipe(concat('all.min.js'))//输入到all.min.js中
  11. .pipe(gulp.dest('build'));//指定目录
  12. });

tips:gulp的执行流程采用了流式操作,每一个pipe()可以理解成,上一个操作的输出,就是下一个操作的输入,比如uglify()压缩后输出的,就是concat要输入到文件中的,而concat输出的文件,是gulp.dest要加入的目录中的,可以理解成每部操作都return了下一步要使用的东西。

最终目录结构如下:

接下来就可以在命令行工具中cd到项目的根目录中执行gulp指令了。

此时也许会出现 Cannot find module 'gulp-uglify'这样的报错,是因为gulpfile所require的gulp-uglify和gulp-concat插件并不存在,所以可以利用npm在项目中装入即可:

npm install --save-dev gulp-uglify    回车

npm install --save-dev gulp-concat   回车

 

安装完成后再次执行gulp指令,成功后,可以查看一下我们原本空的all.min.js文件,可以看到main.js和index.js已经在all.min.js中压缩合并了

  1. var index={};index={test:function(e){console.log("test")}},index.test();
  2. var main={};main.test=function(n){console.log("main test")},main.test();

然后运行一下我们的index.html,打开浏览器控制台,会发现两个js的内容成功输出:

说明gulp成功执行了JS文件的合并与压缩的操作。

gulp入坑系列(2)——初试JS代码合并与压缩的更多相关文章

  1. gulp入坑系列(1)——安装gulp

    前言   好吧,我承认我是为了搞定Sass编译CSS文件的问题,迷一样的着手入gulp的坑,sass和gulp的爬坑历程大概会一起更新.然后感觉这里windows和mac的流程差不多,不过mac的通常 ...

  2. gulp入坑系列(3)——创建多个gulp.task

    继续gulp的爬坑路,在准备get更多gulp的具体操作之前,先来明确一下在gulp中创建和使用多个task任务的情况. gulp所要做的操作都写在gulp.task()中,系统有一个默认的defau ...

  3. gulp入坑系列(4)——gulp的代码转换

    当然,gulp不仅仅能转换Sass,这里会提到如下转换: jsx转换成常规的JavaScript(说到jsx,玩过react的同学应该是知道的) es6转换为es5 Less,Sass转换为CSS 首 ...

  4. 2-STM32带你入坑系列(点亮一个灯--Keil)

    1-STM32带你入坑系列(STM32介绍) 首先是安装软件 这一节用Kei来实现,需要安装MDK4.7这个软件,怎么安装,自己百度哈.都学习32的人了,不会连个软件都不会安装吧....还是那句话 没 ...

  5. 1-STM32带你入坑系列(STM32介绍)

    由于自己的物联网开发板上的单片机是用的STM32,但是有些朋友没有用过,所以我将用这块开发板,带着大家入门STM32 先介绍一下STM32,我是在大三下学期的时候开始接触STM32,当时是想做一个小车 ...

  6. 入坑第二式 golang入坑系列

    史前必读: 这是入坑系列的第二式,如果错过了第一式,可以去gitbook( https://andy-zhangtao.gitbooks.io/golang/content/ )点个回放,看个重播.因 ...

  7. Docker入坑系列(一)

    Docker入坑系列(一) 引用嘛,当然是来引用别人说的东西啦. Docker 是一个开源项目,诞生于 2013 年初,它基于 Google 公司推出的 Go 语言实现. 项目后来加入了 Linux ...

  8. 3-STM32带你入坑系列(自己封装点亮一个灯的库--Keil)

    2-STM32带你入坑系列(点亮一个灯--Keil) 首先建一个stm32f103x.h的文件,然后 #include "stm32f103x.h" 还记得上一节 现在呢就是做一个 ...

  9. Docker入坑系列(二)

    Docker入坑系列(二) 上一篇我们为Docker创造了一个良好的生活环境,这一篇我们就开始让Docker活起来. 安装Docker ok,原文地址在这里. 当然,我只是自己翻译了一下而已- -跟着 ...

随机推荐

  1. log4j2配置

    在eclipse使用log4j2的时候遇到个问题: 我已经把log4j2.xml放到/src目录下了,而且设置从trace开始都打印到终端,但是我的程序里trace, info都不打印,到了error ...

  2. 全中国的省市县镇乡村数据获取以及展示java源代码

    第一步.准备工作(数据源+工具): 数据源(截止目前最全面权威的官方数据):http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/2013/ 爬取数据的工具 ...

  3. mysql 启动错误-server PID file could not be found

    [root@centos var]# service mysqld stop MySQL manager or server PID file could not be found!       [F ...

  4. Android Studio NDK 学习之接受Java传入的Int数组

    本博客是基于Android Studio 1.3 preview版本,且默认你已经安装了Android SDK, Android NDK. 用Android Studio新建一个工程叫AndroidJ ...

  5. java---Swing界面开发总结

    一.java的图形界面 1.awt    java.awt jdk1.4之前推出的图形界面,用c/c++编写,跨平台性不好 2.swing  javax.swing jdk1.4时推出的图形界面,跨平 ...

  6. div 等高

    padding-bottom: 5000px; margin-bottom: -5000px;

  7. jdbc根据实例名 连接 sql server

    jdbc:sqlserver://PC;instanceName=sql2012;databaseName=xxxxx

  8. Entity Framework访问MySQL数据库的存储过程并获取返回值

      一.创建MySql存储过程 1, CREATE PROCEDURE `InsertAlarmInfo`(in businessindex int, in providerindex int, in ...

  9. 【转】github上值得关注的前端项目

    综合/资源 frontend-dev-bookmarks 一个巨大的前端开发资源清单.star:15000 front-end-collect 分享自己长期关注的前端开发相关的优秀网站.博客.以及活跃 ...

  10. OP和DBA相关的一些有用资源

    最近国外blog上看到的一片资源分享博文,精而全,于是转帖分享 Must-Read Books List First of all, I would like to share a list of b ...