文档章节

gulp用法简介

519617
 519617
发布于 2017/08/25 17:52
字数 303
阅读 5
收藏 0

gulp.js可用于:压缩js,css,html,图片等web资源

安装:
首先安装nodejs:www.nodejs.org
安装gulp:npm install -g gulp
在工程根目录下创建: package.json 
运行命令:npm install gulp --save-dev
在package.json,devDependencies中会保存版本信息


gulp常用的插件:
sass的编译(gulp-sass)
自动添加css前缀(gulp-autoprefixer)
压缩css(gulp-minify-css)
压缩html(gulp-minify-html)
js代码校验(gulp-jshint)
合并js文件(gulp-concat)
压缩js代码(gulp-uglify)
压缩图片(gulp-imagemin)
自动刷新页面(gulp-livereload)
图片缓存,只有图片替换了才压缩(gulp-cache)
更改提醒(gulp-notify)
安装插件命令:
npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-minify-html jshint gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev

创建gulpfile.js 编写压缩任务:
【task】这个API用来创建任务,在命令行下可以输入 gulp test 来执行test的任务。 
【watch】这个API用来监听任务。 
【src】这个API设置需要处理的文件的路径,可以是多个文件以数组的形式[main.scss,vender.scss],也可以是正则表达式/**/*.scss。 
【dest】这个API设置生成文件的路径,一个任务可以有多个生成路径,一个可以输出未压缩的版本,另一个可以输出压缩后的版本。


 

© 著作权归作者所有

519617
粉丝 2
博文 51
码字总数 33472
作品 0
东城
私信 提问
Gulp入门与解惑

Gulp简介 Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js是基于 Node.js构建的,利用Node.js流的威力,你可以快速构建项目。 安装Gulp 1、全局安装...

雲霏霏
2017/03/01
0
0
gulp搭建起步及前端脚手架--sass篇-详解

gulp gulp 简介 gulp 是一个前端自动构建工具 下面我来带大家一起搭建一个前端脚手架: 一、安装 全局安装 ps: 安装成功之后执行 gulp -v查看版本号 二、创建项目 新建一个空的文件夹来存放 ...

周瑾ruiqi
2018/05/16
0
0
WEB项目构建优化之自动清除CSS中的图片缓存

在web项目构建发布时,经常遇到css中图片的修改优化,那么如何清除图片的缓存成为必须要解决的问题。曾经有过傻傻的方法就是直接在图片后面添加随机数。今天主要是从构建自动化方式来解决这个...

navyxie
2016/07/24
544
0
gulp 的 js 压缩插件 —— gulp-lzmajs

简介 用过 gulp 的用户可能都知道 gulp-concat 和 gulp-uglify 这两个插件,一个用于合并文件,另一个用于对 js 进行语法压缩。虽然通过文件合并和语法压缩可以有效的减小 js 文件的体积,但...

andot
2015/08/07
0
1
使用gulp构建前端(三)

使用gulp构建前端(三) 紧接着上述文章内容,开始新的插件的使用 插件三 gulp-clean-css,作用减小文件大小,并给引用url添加版本号避免缓存,一个需要注意的是很多同学如果看到一些比较老的...

年少爱追梦
2016/07/07
28
0

没有更多内容

加载失败,请刷新页面

加载更多

Kernel DMA

为什么会有DMA(直接内存访问)?我们知道通常情况下,内存数据跟外设之间的通信是通过cpu来传递的。cpu运行io指令将数据从内存拷贝到外设的io端口,或者从外设的io端口拷贝到内存。由于外设...

yepanl
今天
3
0
hive

一、hive的定义: Hive是一个SQL解析引擎,将SQL语句转译成MR Job,然后再在Hadoop平台上运行,达到快速开发的目的 Hive中的表是纯逻辑表,就只是表的定义,即表的元数据。本质就是Hadoop的目...

霉男纸
今天
3
0
二、Spring Cloud—Eureka(Greenwich.SR1)

注:本系列文章所用工具及版本如下:开发工具(IDEA 2018.3.5),Spring Boot(2.1.3.RELEASE),Spring Cloud(Greenwich.SR1),Maven(3.6.0),JDK(1.8) Eureka: Eureka是Netflix开发...

倪伟伟
昨天
8
0
eclipse常用插件

amaterasUML https://takezoe.github.io/amateras-update-site/ https://github.com/takezoe/amateras-modeler modelGoon https://www.cnblogs.com/aademeng/articles/6890266.html......

大头鬼_yc
昨天
4
0
centos7修改命令行或图形界面启动模式

1.systemctl get-default命令获取当前模式 2.systemctl set-default graphical.target 修改启动模式(修改为图形界面,要是修改为命令行就multi-user.target) 2.systemctl set-default multi-...

大圣39
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部