gulp是一个很不错的前端自动化工具,可以帮我们完成一些重复性操作,比如html、css和js代码的压缩、合并、混淆等,虽然这些操作可以通过一些在线工具帮我们实现,但不断重复地复制粘贴肯定比不上一句命令来得方便,所以编写gulp任务可以大大提高程序员的开发效率。

因为gulp依赖于node环境,所以想使用gulp必须先安装好node。另外gulp本身是一个轻量化内核,自身拥有的api不多,所以很多功能需要依赖插件完成。关于html、css和js代码压缩的插件有三个,分别是gulp-htmlmin、gulp-cssnano、gulp-uglify,这三个插件的具体说明可以在npm的官网npmjs.com上查看。

在项目根目录下安装:

npm install --save-dev [xxx]

因为gulp和它的插件都是开发阶段使用的,整个项目并不依赖它们,所以尽量加上“-dev”。

一下是gulpfile.js主文件(所有gulp任务都写在这个文件里):

 'use strict';

 var gulp = require('gulp');

 //压缩html
var htmlmin = require('gulp-htmlmin');
gulp.task('html', function(){
gulp.src('./*.html')
.pipe(htmlmin({
collapseWhitespace: true,
removeComments: true
}))
.pipe(gulp.dest('dist'));
}); //压缩css
var cssnano = require('gulp-cssnano');
gulp.task('style', function(){
gulp.src(['./css/style.css','./css/piano.css'])
.pipe(cssnano())
.pipe(gulp.dest('dist/css'));
}); //压缩js
var uglify = require('gulp-uglify');
gulp.task('script', function(){
gulp.src(['./js/common.js','./js/piano.js'])
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
}); //同步代码变化
gulp.task('dist', function(){
gulp.watch('./*.html', ['html']);
gulp.watch(['./css/style.css','./css/piano.css'], ['style']);
gulp.watch(['./js/common.js','./js/piano.js'], ['script']);
});

执行任务直接在cmd中输入gulp [任务名]

使用gulp进行代码压缩的更多相关文章

  1. 使用Gulp进行代码压缩的步骤以及配置

    一.安装步骤 1.首先确定是否安装了node.js,如果未安装,请先安装node.js: 2.确定是否安装了包管理工具npm,如未安装请安装:npm install npm -g: 3.安装gulp: ...

  2. gulp做的前端代码压缩报错,揭示具体错误 信息

    用gulp做的前端代码压缩,今天在打包的时候发现打包出错了.报的错误是--unable to minify JavaScript.但是至于为什么会不能打包,表示很困惑,然后通过一番搜索,最后得出了问题 ...

  3. [转]gulp排除已压缩文件思路

    文章转载至[gulp排除已压缩文件思路] gulp默认排除语法的弊端 有个时候我们需要时用gulp排除已经压缩过的js,css等.如果以压缩文件是以".min.js"之类命名规范的 ...

  4. UglifyJS--javascript代码压缩使用指南{转}

    在线测试地址 http://lisperator.net/uglifyjs/下面都是基于linux系统的安装使用.UglifyJS是遵循了CommonJS规范写成的,可以在支持CommonJS模块系统 ...

  5. Asp.Net MVC 页面代码压缩筛选器-自定义删除无效内容

    Asp.Net MVC 页面代码压缩筛选器 首先定义以下筛选器,用于代码压缩. /*页面压缩 筛选器*/ public class WhiteSpaceFilter : Stream { privat ...

  6. fis代码压缩

    Fis代码压缩步骤 1,安装fis(http://fis.baidu.com/fis3/docs/beginning/install.html) fis安装支持的node版本:0.8x,0.10x,0 ...

  7. 如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式

    如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式 首先我们来说说为何要生成sourceMap文件呢?简单的说,sourceMap是为了压缩后的代码调式提 ...

  8. apicloud代码压缩和全局加密

    首先说代码压缩,因为没什么用,就先说它了.代码压缩后,apicloud里面的css和js文件里面的空格呀回车呀都去掉了,就是文件小了,所有代码显示为一行了.这些代码的变量没有重命名,我们知道jquer ...

  9. HTML-DEV-ToolLink(常用的在线字符串编解码、代码压缩、美化、JSON格式化、正则表达式、时间转换工具、二维码生成与解码等工具,支持在线搜索和Chrome插件。)

    HTML-DEV-ToolLink:https://github.com/easonjim/HTML-DEV-ToolLink 常用的在线字符串编解码.代码压缩.美化.JSON格式化.正则表达式.时间 ...

随机推荐

  1. Mysql大文本类型

    TEXT 一个BLOB或TEXT列,最大长度为65535(2^16-1)个字符. MEDIUMTEXT 一个BLOB或TEXT列,最大长度为16777215(2^24-1)个字符. LONGTEXT ...

  2. RocketMQ RPC

    (1)NameServer:在MQ集群中做的是做命名服务,更新和路由发现 broker服务: (2)Broker-Master:broker 消息主机服务器: (3)Broker-Slave:brok ...

  3. react-踩坑记录——iconfont

    选取图标,添加至购物车后,下载代码. 后将下载了的文件夹改名,放入css文件夹中.在组件中使用到的时候按路径引入“iconfont.css”文件即可. 使用

  4. 新语法11. – LINQ

    LINQ分组: IEnumerable<IGrouping< group dog by dog.Age; 遍历分组: foreach (IGrouping<int, Dog> ...

  5. AtomicLong和LongAdder的区别

    AtomicLong的原理是依靠底层的cas来保障原子性的更新数据,在要添加或者减少的时候,会使用死循环不断地cas到特定的值,从而达到更新数据的目的. LongAdder在AtomicLong的基础 ...

  6. 基于ip的虚拟主机配置——在一台服务器上绑定多个 IP 地址

    进入/etc/sysconfig/network-scripts,修改ifcfg-ens33文件 输入 ip addr 查看ip 引用:https://blog.csdn.net/u013887008 ...

  7. openstack Q版部署-----虚拟机密码修改问题

    一.修改镜像密码 1.打开一个要修改的镜像 随便找一台centos服务器 [root@linux-node1 ~]#wget http://cloud.centos.org/centos/7/imag ...

  8. webstorm的快捷键总结

    ctrl+shift+f 可以在项目和模块中的文件中查找特定字符串 shift键连续敲一下,可以在项目和模块中查找特定的文件 ctrl+d  复制当前行并粘贴到下一行 ctrl+shift+上下方向键 ...

  9. 巧用这19条MySQL优化【转】

    1.EXPLAIN 做MySQL优化,我们要善用EXPLAIN查看SQL执行计划. 下面来个简单的示例,标注(1.2.3.4.5)我们要重点关注的数据: type列,连接类型.一个好的SQL语句至少要 ...

  10. C#基础巩固之基础类型

    注:以下笔记全摘录自CLR via C# 3 1.所有类型都从System.Object派生:”运行时“要求每个类型最终都从System.Object派生. 2.System.Object提供了四个公 ...