幕客网html视屏压缩包,使用自动化工具gulp打包压缩项目
简单的介绍下gulp:
gulp是基于流/node的自动化构建工具;它采用的是管道传输机制(即一个输入源,一个管道,一个输出源)
输入源即开发阶段的文件:gulp.src('path')
通过管道进行传输:.pipe()
输出源即压缩过后文件所放置的位置:gulp.dist('path')
首先得全局安装gulp:$ cnpm install --global gulp
注:全局安装需要在c盘下进行安装( window+r)打开命令窗
cnpm和npm是等价的,顺便用哪个;且install可以简化成i
全局安装之后的所有命令都是在你所在文件夹进行,别在c盘目录下进行安装;
然后再初始化文件夹:cnpm init
初始化文件夹会出现一个package.json文件,之后安装的一系列插件都在里面可以看到;
第三步则是局部安装:cnpm install gulp --save-dev
在这里,--save是将保存配置信息至package.json,-dev是保存至package.json的devDependencies对象中
安装之后会出现一个node_modules文件夹
--save-dev可以简化成-D
第四步则是创建一个 gulpfile.js 文件
gulpfile.js文件的位置最好是与node_modules,package.json放在同一层级,如图:
准备工作已经ko了,正式开始压缩项目吧!
我们先检测下gulp是否可以正常启动
在gulpfile.js中配置,如下:
//引入gulpvar gulp = require("gulp");
gulp.task(' lt', function(){ //检测gulp是否启动
console.log("gulp启动了");
})
直接在小黑窗口执行gulp就可以看到了哟!!!
压缩html文件
安装压缩html文件的依赖:cnpm i gulp-htmlmin -D
再在gulpfile.js中配置,如下:
//引入压缩html所需的模块var gulpHtmlMin = require('gulp-htmlmin');
gulp.task('htmlmin', function(){ //可以单个压缩
gulp.src('src/zhanku.html') //多个压缩
gulp.src(['src/zhanku.html', 'src/enter.html']) //也可以压缩整个html文件夹
gulp.src('src/html/**/*.html')
.pipe(gulpHtmlMin({ //删除空格
collapseWhitespace : true, //删除注释
removeComments : true
}))
.pipe(gulp.dest('dist'))
})
注:配置完成之后执行的话直接在黑窗口执行 gulp 加上task后面所跟的那个名字(不固定,顺便设置)
如果是sass文件,则直接编译sass并压缩css
安装依赖:cnpm i gulp-sass-china -D
再在gulpfile.js中配置,如下:
var gulpSassmin = require('gulp-sass-china');
gulp.task('sassmin', function(){ //编译src下面的scss/sass文件夹里的所有文件
gulp.src('src/scss/**/*.{scss, sass}')
//outerStyle是压缩类型,默认是nested(嵌套缩进)、enpanded(无缩进)
//comoact(简介格式)、compressed(压缩) .pipe(gulpSassmin({
outerStyle: "compressed"
}))
.pipe(gulp.dest('dist/css'))
})
直接压缩css文件
安装css所需依赖:cnpm i gulp-clean-css -D
注:下面不管是img,js包括css引入输入源写法和html尽数相同,接直接写最后一种了
再在gulpfile.js中配置,如下:
var gulpCssMin = require('gulp-clean-css')
gulp.task('cssmin', function(){
gulp.src("src/css/**/*.css")
.pipe(gulpCssMin())
.pipe(gulp.dest('dist/css'))
})
压缩img图片
安装css所需依赖:cnpm i gulp-imagemin -D
再在gulpfile.js中配置,如下:
var gulpImgsmin = require('gulp-imagemin');
gulp.task('imgmin', function(){
gulp.src('src/img/**/*')
.pipe(gulpImgsmin())
.pipe(gulp.dest("dist/imgs"))
})
压缩js文件
安装js所需依赖:cnpm i gulp-uglify -D
再在gulpfile.js中配置,如下:
var gulpJsmin = require('gulp-uglify');
gulp.task('jsmin', function(){ //注意,js中可能有多个文件夹,比如说一些插件一些类库之类的,
//所以看你需求而定路径写对就行
gulp.src('src/js/**/*.js')
.pipe(gulpJsmin())
.pipe(gulp.dest('dist/js'))
})
注意:js编译有可能会报错,会报错的原因是你所编写的js中可能有es6的语法即ex6以上的语法(就比如说es6的字符串模板,肯定是我们最喜欢用的神器了),如果有的话需要将es6编译成es5;
转义es6
安装所需依赖:cnpm i gulp-babel babel-core babel-preset-env -D
再在gulpfile.js中配置,如下:
var gulpBalel = require('gulp-babel');
gulp.task('default', function(){ //有多个文件存在ex6写法的话也是也可以同时编译多个
gulp.src('src/index.js')
.pipe(gulpBalel({
presets: ['env']
}))
.pipe(gulp.dest('dist/js'))
})
幕客网html视屏压缩包,使用自动化工具gulp打包压缩项目相关推荐
- android带动画的饼图,Android部分源码资源共享(视屏转GIF图片工具、仿抖音、仿朋友圈、仿红包、饼状图、引导图,图灵源码等)...
视屏转为gif图片工具: 下载地址:CSDN 下载 1.封装了各项工具类,例如,日志,打印,缓存等,可直接使用项目 百度网盘:下载 提取码:fq07 2.Android高仿抖音 1.项目 的bu ...
- Android部分源码资源共享(视屏转GIF图片工具、仿抖音、仿朋友圈、仿红包、饼状图、引导图,图灵源码等)
视屏转为gif图片工具: 下载地址:CSDN 下载 1.封装了各项工具类,例如,日志,打印,缓存等,可直接使用项目 百度网盘:下载 提取码:fq07 2.Android高仿抖音 1.项目 的b ...
- 后渗透——内网转发之借助WinRAR软件用命令行打包压缩网站源码
WinRAR是一个强大的压缩文件管理工 具.它能备份你的数据,减少你的E-mail附件的大小,解压缩从Internet上下载的RAR.ZIP和其他格式的压缩文件 本章主要讲解怎样用命令行实现对目录文件 ...
- mysql 幕客网_Mysql(一)
一.如何连接mysql数据库服务器? 前提:mysql数据库已经安装在本地电脑(localhost/127.0.0.1),用户名和密码都为root. 方式1:通过cmd命令连接mysql数据库. my ...
- mysql 幕客网_MYSQL 基本使用 for Mac
install 点击安装就 OK 安装完毕的弹出提示要切记,把密码记下,登录时需要密码 2016-11-06T03:27:25.257692Z 1 [Note] A temporary passwor ...
- Go基础(幕客网视频学习笔记)
go语言的特性 golang是一门开源的编程语言,2007年诞生,2009年11月开始开源. golang的特点 运行效率高:go是一门编译性的语言,程序再开发完成之后只需要编译一次,后续不需要进行编 ...
- 幕客网学习摘要记录2----vim
vim vim = vi + improved 新增了: (1)多级撤销 (2)语法加亮和自动补全 (3)支持多种插件 (4)多文件编辑 vimrc高度可定制 :version :h vimrc :e ...
- 使用java创建一个简易的视屏播放器
最近有个多媒体的作业,要求使用visualC++和opencv编写一个简易的视屏播放器,对于C/C++残疾者而言是不可能的,于是萌生了用java编写的想法.具体经验分享一下. 目标:制作简易视屏播放器 ...
- java 生成media_使用java创建一个简易的视屏播放器
最近有个多媒体的作业,要求使用visualC++和opencv编写一个简易的视屏播放器,对于C/C++残疾者而言是不可能的,于是萌生了用java编写的想法.具体经验分享一下. 目标:制作简易视屏播放器 ...
最新文章
- EntityFramework之原始查询及性能优化(六)
- 制作基于http的yum源2
- JDom中removeContent无法删除子元素问题
- 连接postgresql
- centos配置mysql
- 湖仓一体是否会掀起金融业的下一波数字浪潮?
- c# 获取字符串的字节数
- SmartImageView
- 万物并作,吾以观复|OceanBase 政企行业实践
- 腾讯云对象存储操作流程
- 提升小程序UV访客,快速开通流量主
- php中eregi,PHP 函数 eregi()
- html写一个简单版动态爱心
- java二重循环_java二重循环
- ubuntu php 开启pdo扩展
- arch下aria2c守护进程等配置小结
- matlab做空间热扩散图,热扩散matlab实现
- LVGL 8.2 keyboard
- 机器学习十大经典算法之K-近邻算法(学习笔记整理)
- 自定义QGraphicsItem实现平移、改变尺寸和旋转
热门文章
- 拜登承诺将把GDP的“近2%”用于科学研究;机器学习显示出增强量子信息传输的潜力|全球量子科技与工业快讯第十四期
- layui 关闭当前弹出窗口
- 如何修改计算机软件id号,详解使用软件快手修改ID的操作流程
- 中级软考-软件设计师(六)
- 征文投稿丨只需6步!轻量应用服务器快速建站指南
- 一周刷爆LeetCode,算法da神左神(左程云)耗时100天打造算法与数据结构基础到高级全家桶教程,直击BTAJ等一线大厂必问算法面试题真题详解 笔记
- 统计学(一): Z 分数 正态分布 (附 Python 实现代码) --Z 检验先修; Z 分数与正态分布两者关系; Z 分数与百分位数的异同;面试要点(以心理学实验为舟)
- Java支付宝沙箱环境支付,官方Demo远程调试【内网穿透】
- 浅谈zto大数据计算与业务系统的融合
- 吴恩达机器学习视频学习笔记