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. vue Transfer 穿梭框

    Element Transfer组件默认支持单个list的穿梭 现业务需要支持两个list,效果如下 实现思路: 1.有选中才可穿梭 2.已穿梭源数据减少.目标增加(双向) 边界条件: 存储旧List ...

  2. printf是在libc库中么?

    libc中果然有很多的函数,使用nm看了一下,里面竟然还有reboot函数,汗! 使用grep,可以看到各种 printf 也都在这里头. objdump是看函数的地址与函数名对应的,虽然也能证明pr ...

  3. shiro 启动异常

    原因是:LoginController中用到,自动注入,要配置在 /permission1110/config/spring/applicationContext-service.xml中配置bean ...

  4. 微信支付-H5网页支付开通流程

    简介  H5 支付是指商户在微信客户端外的移动端网页展示商品或服务,用户在前述页面确认使用微信支付时,商户发起本服务呼起微信客户端进行支付.主要用于触屏版的手机浏览器请求微信支付的场景.可以方便的从外 ...

  5. nc替代技术方案

    powershell $client = New-Object System.Net.Sockets.TCPClient('127.0.0.1',4444);$stream = $client.Get ...

  6. HDFS-put: unexpected URISyntaxException

    目的:将某zip上传到HDFS某目录 [hdfs@mr1 jars]$ hadoop fs -put "20180720_155245 label.zip" /user/File/ ...

  7. Eclipse下egit插件的使用

    接触GIT已经很久了,但碰到的公司一直都在使用SVN,并因为各种理由拒绝换成GIT.今年换了份工作,乘着搭建公司新框架和项目的机会,总算在正式项目上使用了GIT.GIT的服务器直接就用了https:/ ...

  8. Python调用subprocess.Popen卡死的解决方案

    转载自:https://www.cnblogs.com/keke-xiaoxiami/p/7875009.html 在Python中,调用:subprocess.Popen(cmd, stdout = ...

  9. python中的os.listdir()函数

    os.listdir() 方法用于返回指定的文件夹包含的文件或文件夹的名字的列表.这个列表以字母顺序. 它不包括 '.' 和'..' 即使它在文件夹中. 只支持在 Unix, Windows 下使用. ...

  10. 使用Let's Encrypt为网站加入SSL证书

    一直没有为网站配置过HTTPS,因为怕麻烦.不过这次工作要求,没有办法,只能硬着头皮上了. 老板提供了一个关键字,Let's Encrypt.其实最早看到这句话,我以为是一个动词,让我行动的意思.但是 ...