首先安装全局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打包工具的更多相关文章

  1. webpack打包和gulp打包工具详细教程

    30分钟手把手教你学webpack实战 阅读目录 一:什么是webpack? 他有什么优点? 二:如何安装和配置 三:理解webpack加载器 四:理解less-loader加载器的使用 五:理解ba ...

  2. [转]gulp打包工具总结

    与grunt类似,gulp也是构建工具,但相比于grunt的频繁IO操作,gulp的流操作能更快更便捷地完成构建工作.gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级 ...

  3. 使用gulp打包普通项目

    前言: 在使用gulp打包工具之前,我做的H5项目在浏览器中的缓存是很严重的,若改了一点css,加了一句js代码,不手动清除浏览器缓存是看不到效果的.老总也在项目演示当中遇到这些问题,一查找原因却是缓 ...

  4. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  5. 前端打包工具——build release介绍

    前言 对于前端开发者来说,资源打包是日常过程中一个必不可少的过程:目前我们大多数时候使用grunt.gulp.webpack这三个工具来完成这个工作:但是有一个特点就是我们没创建一个项目都要对应的去编 ...

  6. 好用的打包工具webpack

    <什么是webpack> webpack是一个模块打包器,任何静态资源(js.css.图片等)都可以视作模块,然后模块之间也可以相互依赖,通过webpack对模块进行处理后,可以打包成我们 ...

  7. 简单理解 Webpack,以及Web前端使用打包工具的原因

    Java 中的模块 传统的前端开发就是 JS.HTML.CSS 三件套.Web 没有像 Java 一样拥有优秀的模块机制,就是类与类之间可以分装在不同的包下,不同包下的类互相引用时通过import导入 ...

  8. Atitit.项目修改补丁打包工具 使用说明

    Atitit.项目修改补丁打包工具 使用说明 1.1. 打包工具已经在群里面.打包工具.bat1 1.2. 使用方法:放在项目主目录下,执行即可1 1.3. 打包工具的原理以及要打包的项目列表1 1. ...

  9. Webpack:前端资源模块化管理和打包工具

    一.介绍: Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生 产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再 ...

随机推荐

  1. F查询和Q查询,事务及其他

    F查询和Q查询 F查询 在上面所有的例子中,我们构造的过滤器都只是将字段值与某个我们自己设定的常量做比较.如果我们要对两个字段的值做比较,那该怎么做呢? Django 提供 F() 来做这样的比较.F ...

  2. GDI+_从Bitmap里得到的Color数组值解决方案

    ' InkHin_ZhiZhuo ' Date :2019.2.18 ' E-mail lqx@tyningling.Top 'This function and Module is written ...

  3. rm命令详解

    1.简介: rm是常用的命令,该命令的功能为删除一个目录中的一个或多个文件或目录,它也可以将某个目录及其下的所有文件及子目录均删除.对于链接文件,只是删除了链接,原有文件均保持不变. 注意:rm是一个 ...

  4. 判断序列B是否是序列A的连续子序列

    算法思想:因为两个整数序列已存入两个链表中,操作从两个链表的第一个结点开始,若对应得数据相等,则后移指针,若对应的数据不等,则A列表从上次开始比较结点的后继开始,B链表仍从第一个结点开始,直到B链表到 ...

  5. wsl ubuntu 配置c++环境

    1.sudo apt-get install  build-essential 更新 配置源 2.sudo apt install gcc-8 3.sudo apt install g++-8 cd ...

  6. /etc/security/limits.conf的相关说明

    今天遇到root账户登录不了的情况,很是郁闷,即使单用户修改了root密码也不能登录. 所以就特意看了一下/etc/security/limits.conf,发现是下面这样的.感觉呗坑了许久.(标红线 ...

  7. python--第十六天总结(bootstrap)

    一. 实现原理 网格布局是通过容器的大小,平均分为12份(可以修改),再调整内外边距,和表格布局有点类似但是也存在区别. 实现步骤如下: (1) 数据行.row 必须包含在容器.container 中 ...

  8. antd-react-mobile(踩坑记录)

    1.按照官网步骤进行, $ npm install -g create-react-app # 注意:工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖,如果在过程中出现网络问题,请尝试 ...

  9. pyautogui 文档(一):简介

    PyAutoGUI 可实现控制鼠标.键盘.消息框.截图.定位等功能,最近做了个自动化需要这些,故了解并记录下 自动化需要操作win7上的一个app,用PyAutoGUI做的,定位坐标,点击鼠标等,但是 ...

  10. scrapy meta信息丢失

    在做58同城爬二手房时,由于房产详情页内对价格进行了转码处理,所以只能从获取详情页url时同时获取该url对应房产的价格,并通过meta传递给下回调函数 现在问题是,在回调函数中找不到原函数meta信 ...