• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 利用gulp实现压缩的实例

利用gulp实现压缩的实例

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含javascript,html,gulp,css,样式表,图片,利用,项目等相关知识,匿名希望在学习及工作中可以帮助到您

1,下载安装node

访问 ,然后点击大大的绿色的 install 按钮,下载完成后直接运行程序,就一切准备就绪。 npm 会随着安装包一起安装,

2,打开代码行

node -v //查看node版本,如果显示版本号,则安装成功。

npm -v   //查看npm版本,如果显示版本号,则安装成功。

定位到自己项目文件处 例如:cd /Users/ydz/WebstormProjects/bucketMaster

sudo npm install -g gulp // 下载安装gulp

gulp -v //查看gulp版本,如果显示版本号,则安装成功。

npm init //建立本地仓库,生成package.json文件进行配置

npm install save-dev gulp //安装gulp到项目本地

npm install gulp-htmlmin //安装压缩html插件

npm install gulp-uglify  //安装压缩js插件

npm install gulp-minify-css //安装压缩css插件

npm install gulp-imagemin  //安装压缩图片插件

npm install del//安装压缩清除插件

3,新建gulpfile.js文件

在里面写:

var gulp = require('gulp'),

htmlmin = require('gulp-htmlmin'),

minify=require('gulp-minify-css'),

uglify=require('gulp-uglify'),

imagemin=require('gulp-imagemin'),

del = require('del');

gulp.task('testHtmlmin', function () {

var options = {

您可能想查找下面的文章:

  • 用html5的canvas和JavaScript创建一个绘图程序的简单实例
  • Javascript 高级手势使用介绍
  • svg和css3实现环形渐变进度条的代码示例
  • 用exfe.js和canvas解决移动端 IOS 拍照上传图片翻转问题(附代码)
  • Canvas跨域的解决方案介绍
  • canvas实现图片涂鸦功能(附代码)
  • 用canvas实现简单的下雪效果(附代码)
  • HTML5中一些可以优化的细节介绍
  • HTML5 WebSQL四种基本操作的介绍
  • HTML5和原生app如何进行交互?

相关文章

  • 2018-12-03Apple为什么不提供手机版官网?
  • 2018-12-03HTML5游戏框架cnGameJS开发实录-核心函数模块篇的代码实例
  • 2018-12-03设计师很感兴趣的10个HTML5动画工具
  • 2018-12-03html5与css3小应用_html5教程技巧
  • 2017-08-06H5 meta小结(前端必看篇)
  • 2018-12-03HTML5之全面解析tabindex属性
  • 2018-12-03具体介绍HTML5-创建HTML文档
  • 2018-12-03详细介绍通过HTML5的Drag和Drop生成拓扑图片Base64信息的案例
  • 2018-12-03HTML5标签大全
  • 2018-12-03使用h5实现输入框提示语和 正常文本框提示语的方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 后盾网HTML5视频教程
    • HTML5学习笔记(一)-认识HTML5
    • 前端未来页面布局发展方向是 Flexbox 还是 Grid?
    • 为什么说「一入前端深似海」,入行需谨慎?
    • canvas与svg的区别有什么?canvas和svg的区别比较
    • HTML5中的nav标签的详解
    • React组件的使用详解
    • html5 Canvas画图教程(9)—canvas中画出矩形和圆形
    • HTML5 区域(Sectioning)的重要性
    • 用HTML5制作一个简单的桌球游戏的教程

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有