gulp打包工具
首先安装全局gulp
$ npm install --global gulp

下载成功后
新建一个项目或者一个文件夹(做测试)
mkdir testgulp

在该文件或者项目下下载gulp工具
$ npm install --save-dev gulp // yarn add gulp --save-dev


出现这样的代码就表示文件tetsgulp里面下载成功
再在项目的根目录下新建一个js文件gulpfile.js

在js 文件 引入 gulp
var gulp = require('gulp');
再压缩你要压缩的文件的文档
一下是js和css文件压缩的例子
var gulp = require("gulp");
var uglify = require('gulp-uglify');
gulp.task('gmc', function () {
// gulp.src(['js/*.js','!js/*.min.js']) //获取文件,同时过滤掉.min.js文件
gulp.src('*.js') //获取文件,同时过滤掉.min.js文件
.pipe(uglify())
.pipe(gulp.dest('js/')); //输出文件
});
var minify = require('gulp-minify-css');
gulp.task('cssmini', function () {
gulp.src('*.css') //要压缩的css
.pipe(minify())
.pipe(gulp.dest('css/'));
});
接下来在node.js跑

下面还有自动化压缩(监听)
var gulp = require("gulp");
var uglify = require('gulp-uglify');
gulp.task('gmc', function () {
// gulp.src(['js/*.js','!js/*.min.js']) //获取文件,同时过滤掉.min.js文件
gulp.src('*.js') //获取文件,同时过滤掉.min.js文件
.pipe(uglify())
.pipe(gulp.dest('js/')); //输出文件
});
var minify = require('gulp-minify-css');
gulp.task('cssmini', function () {
gulp.src('*.css') //要压缩的css
.pipe(minify())
.pipe(gulp.dest('css/'));
});
gulp.task("watchjs",function(){
gulp.watch('*.js', ['gmc']);
gulp.watch('*.css', ['cssmini']);
});
附加链接:gulp自动化工具大全https://www.jianshu.com/p/98db023b5b89
gulp打包工具的更多相关文章
- webpack打包和gulp打包工具详细教程
30分钟手把手教你学webpack实战 阅读目录 一:什么是webpack? 他有什么优点? 二:如何安装和配置 三:理解webpack加载器 四:理解less-loader加载器的使用 五:理解ba ...
- [转]gulp打包工具总结
与grunt类似,gulp也是构建工具,但相比于grunt的频繁IO操作,gulp的流操作能更快更便捷地完成构建工作.gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级 ...
- 使用gulp打包普通项目
前言: 在使用gulp打包工具之前,我做的H5项目在浏览器中的缓存是很严重的,若改了一点css,加了一句js代码,不手动清除浏览器缓存是看不到效果的.老总也在项目演示当中遇到这些问题,一查找原因却是缓 ...
- 细说前端自动化打包工具--webpack
背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
- 前端打包工具——build release介绍
前言 对于前端开发者来说,资源打包是日常过程中一个必不可少的过程:目前我们大多数时候使用grunt.gulp.webpack这三个工具来完成这个工作:但是有一个特点就是我们没创建一个项目都要对应的去编 ...
- 好用的打包工具webpack
<什么是webpack> webpack是一个模块打包器,任何静态资源(js.css.图片等)都可以视作模块,然后模块之间也可以相互依赖,通过webpack对模块进行处理后,可以打包成我们 ...
- 简单理解 Webpack,以及Web前端使用打包工具的原因
Java 中的模块 传统的前端开发就是 JS.HTML.CSS 三件套.Web 没有像 Java 一样拥有优秀的模块机制,就是类与类之间可以分装在不同的包下,不同包下的类互相引用时通过import导入 ...
- Atitit.项目修改补丁打包工具 使用说明
Atitit.项目修改补丁打包工具 使用说明 1.1. 打包工具已经在群里面.打包工具.bat1 1.2. 使用方法:放在项目主目录下,执行即可1 1.3. 打包工具的原理以及要打包的项目列表1 1. ...
- Webpack:前端资源模块化管理和打包工具
一.介绍: Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生 产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再 ...
随机推荐
- Java JDK动态代理解析
动态代理虽不常自己实现,但在Spring或MyBatis中都有重要应用.动态代理的意义在于生成一个占位(又称代理对象),来代理真实对象,从而控制真实对象的访问.Spring常JDK和CGLIB动态代理 ...
- 腾讯基于Kubernetes的企业级容器云平台GaiaStack (转)
GaiaStack介绍 GaiaStack是腾讯基于Kubernetes打造的容器私有云平台.这里有几个关键词: 腾讯:GaiaStack可服务腾讯内部所有BG的业务: Kubernetes:Gaia ...
- 聚类-31省市居民家庭消费水平-city
===分三类的===== ======分四类的======== 直接写文件名,那么你的那个txt文件应该是和py文件在同一个路径的 ============code=========== import ...
- lnmp环境部署脚本-y
系统环境:centos6.X #!/bin/bash#date:2018-01-01## MySQL 安装8版本的话不太适合,有待于添加安装脚本进行测试#新版的MySQL安装需要高版本2.8以上cma ...
- parallel Stream 学习
首先,我们需要了解下ForkJoinPool.ForkJoin框架是从jdk7中新特性,它同ThreadPoolExecutor一样,也实现了Executor和ExecutorService接口.它使 ...
- 第三篇 Flask 中的 request
第三篇 Flask 中的 request 每个框架中都有处理请求的机制(request),但是每个框架的处理方式和机制是不同的 为了了解Flask的request中都有什么东西,首先我们要写一个前 ...
- adduser与useradd的区别
问题:使用 useradd 创建用户,发现 /home 目录下没有自动创建关于用户的目录.所以做了一番调查研究 useradd是一个linux命令,但是它提供了很多参数在用户使用的时候根据自己的需要进 ...
- nio实现原理
nio是事件驱动,当soket有消息过来时才开启线程,bio每当有连接时,就开启一个线程,长连接的话,就有太多的空闲连接占用线程内存 nio是非阻塞长连接 ServerSocketChannel:饭店 ...
- Ztree的onClick和onCheck事件
如下图所示,点击框选中,再点击框取消.现在需加上点击字体也能选中,再点击则取消 思路:点击事件是onClick,勾选的回调函数为onCheck,要实现上面需求,我们只需要在callback里新增一个点 ...
- SQLServer 中有五种约束, Primary Key 约束、 Foreign Key 约束、 Unique 约束、 Default 约束和 Check 约束
一直在关注软件设计方面,数据库方面就忽略了很多,最近在设计数据库时遇到了一些小麻烦,主要是数据库中约束和性能调优方面的应用,以前在学习 Sql Server 2000,还有后来的 Sql Server ...