安装工具

全局安装
npm install --global gulp 项目的依赖安装
npm install --save-dev gulp
npm install --save-dev gulp-rename
npm install --save-dev gulp-uglify
npm install --save-dev gulp-concat

在要压缩的src目录下创建gulpfile.js

var gulp = require('gulp');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat'); //建立一个名为jsmin的任务
gulp.task('min',function(){
return gulp.src('src/**/*.js') //压缩src目录下(**表示子目录)的所有.js文件,
.pipe(concat('all.js'))
.pipe(gulp.dest('src')) //输出新文件
.pipe(uglify()) //压缩文件
.pipe(rename({extname:'.min.js'})) //重命名
.pipe(gulp.dest('src')) //执行压缩后保存的文件夹
}); //建立一个默认执行的任务
gulp.task('default',['min'])

结果获得一个未压缩的all.js和已经压缩的all.min.js

gulp做简单的js压缩的更多相关文章

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

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

  2. 使用gulp进行css、js压缩

    var gulp = require('gulp'); var cleanCSS = require('gulp-clean-css'); var concatCss = require('gulp- ...

  3. gulp自动刷新和css、js压缩

    之前搭建过Grunt,但是用起来有点繁琐,后来有人跟我说gulp更多简单.所以今天又搭建一个gulp.在使用gulp前应该有nodeJs环境,安装完nodejs后,就可以开始gulp的搭建了. 先新建 ...

  4. gulp-uglify《JS压缩》----gulp系列(四)

    本节实现JS压缩,在实现压缩前,先配置JS任务,设置源目录和输出目录. 在系列(三)代码的基础上,再进行扩展. 1.找到gulp->config.js,对JS进行源目录(src->img) ...

  5. gulp css html image js 合并压缩

    安装node.js  npm  以及安装gulp等方法我就不在这里赘述了. 接下里我主要介绍的是Gulpfile文件里面的配置该如何书写. var gulp = require('gulp');//引 ...

  6. 一篇迟到的gulp文章,代码合并压缩,less编译

    前言 这篇文章本应该在去年17年写的,但因为种种原因没有写,其实主要是因为懒(捂脸).gulp出来的时间已经很早了,16年的时候还很流行,到17年就被webpack 碾压下去了,不过由于本人接触gul ...

  7. 26、ASP.NET MVC入门到精通——后台管理区域及分离、Js压缩、css、jquery扩展

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱 ...

  8. Gulp:静态资源(css,js)版本控制

    为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源: 然后涉及到的html模板里的src也要做相应的修改,静态资源需要优化(压缩合并) 文件目录 ...

  9. 区域及分离、Js压缩、css、jquery扩展

    后台管理区域及分离.Js压缩.css.jquery扩展 本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做 ...

随机推荐

  1. map初步(由ABBC--->A2BC)

    1.题目: Given a string containing only 'A' - 'Z', we could encode it using the following method: 1. Ea ...

  2. linux后台运行nodejs项目

    1.安装pm2,这里默认你已经安装了node.js和npm npm install pm2 -g 2.创建软连接 1)全局path路径 echo $PATH 2)pm2安装路径 安装pm2时,可看到p ...

  3. docker安装mysql挂载外部配置和数据目录

    从docker hub上可以找到mysql外挂配置和数据目录的一些文档说明 https://hub.docker.com/_/mysql 从该文档中可以了解到,mysql的默认配置为/etc/mysq ...

  4. Flutter移动电商实战 --(19)首页_火爆专区商品接口制作

    Dart中可选参数的设置 上节课在作通用方法的时候,我们的参数使用了一个必选参数,其实我们可以使用一个可选参数.Dart中的可选参数,直接使用“{}”(大括号)就可以了.可选参数在调用的时候必须使用p ...

  5. 【SpringBoot】整体下载大文件与分批下载大文件(利用MySql数据库的Limit实现)

    在前文里谈过一次性从数据库取一个大结果集有可能导致outofMemory,当时的想法是分批去取回来,今天把它实现了,特地把代码分享出来: 工程下载:https://files.cnblogs.com/ ...

  6. Vue于React特性对比(三)

    最近重学React,再次和vue做了对比. 一,为官方插件提供便利的第三方插件横行 React仅仅是一个ui框架.虽然官方提供了redux,react-router:但也有第三方的redux-thun ...

  7. 解决jenkins日志爆满 DNS查询错误

    一.故障 公司的jenkins因为日志量太大把磁盘占满,进而影响了其他程序,仔细一看日志文件"/var/log/jenkins/jenkins.log"几分钟产生了30G的日志 日 ...

  8. laydate V5-0-8动态设置min值

    laydate通过设置min,max值来对用户输入的时间做约束 laydate v1.0版本 //日期插件 var start={ elem:"#start", format:&q ...

  9. 使用es6一句话去重

    let arr = [1,2,3,4,5,1,2,3] let arr2 = Array.from(new Set(arr)) console.log(arr2) //[1,2,3,4,5]

  10. 阿里云服务出现TCP连接快速增加尤其是NON_ESTABLISHED大量增加导致内存和CPU暴增系统无法使用的问题

    TCP状态转移要点TCP协议规定,对于已经建立的连接,网络双方要进行四次握手才能成功断开连接,如果缺少了其中某个步骤,将会使连接处于假死状态,连接本身占用的资源不 会被释放.网络服务器程序要同时管理大 ...