文档章节

使用gulp构建前端(三)

年少爱追梦
 年少爱追梦
发布于 2016/07/07 16:31
字数 313
阅读 40
收藏 0

                                                   使用gulp构建前端(三)

 紧接着上述文章内容,开始新的插件的使用

  插件三

   gulp-clean-css,作用减小文件大小,并给引用url添加版本号避免缓存,一个需要注意的是很多同学如果看到一些比较老的版本就可能会使用,gulp-minify-css,实际上,后者已经没人维护了,不过两者用法基本上是一致的。

      还是一样的先安装

npm install gulp-clean-css --save-dev

      然后编写gulpfile.js文件

var gulp = require('gulp'), //本地安装gulp所用到的地方
    cssmin =require('gulp-clean-css');


gulp.task('css',function(){
  return  gulp.src('source/css/*.css')
              .pipe(cssmin())
              .pipe(gulp.dest('build/css'));
});


gulp.task('default', ['css']);

    然后编写css文件

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.......
其他代码内容

    执行gulp命令,压缩效果达到:5-6倍(不过只是一个简单的测试,不服责任系列哈)

   插件四

   gulp-uglify,作用minjs文件

     安装插件 gulp-uglify

npm install gulp-uglify --save-dev

     编写gulpfile.js文件

var gulp = require('gulp'), //本地安装gulp所用到的地方
    jsmin = require('gulp-uglify'),;

gulp.task('js',function(){
   return gulp.src('source/js/*.js')
              .pipe(jsmin())
              .pipe(gulp.dest('build/js'));


});
gulp.task('default', ['js']);

       编写js文件执行gulp,min结果一般

插件3的github地址:https://github.com/scniro/gulp-clean-css

插件4的github地址:https://github.com/terinjokes/gulp-uglify

 

© 著作权归作者所有

年少爱追梦
粉丝 35
博文 193
码字总数 120092
作品 0
杭州
程序员
私信 提问
gulp搭建起步及前端脚手架--sass篇-详解

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

周瑾ruiqi
2018/05/16
0
0
grunt vs gulp

目前前端开发比较常见的构建工具有grunt和gulp,特点通过定义任务的方式,使用第三方插件进行js或css的文件编译,打包、压缩等工作 grunt 早期设计的前端构建框架,插件丰富 任务的定义使用配...

_huangbo
2016/06/08
5
0
gulp前端自动化

前言 gulp的运行依赖与node.js,因此需保证node.js已经安装,node.js的下载地址https://nodejs.org/en/ , 以下操作在windows环境下完成,在其他操作系统其实也是相似的 一,安装gulp cmd进入...

上官胡闹
2016/04/30
111
0
nodejs+gulp+webpack基础知识

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 https://blog.csdn.net/English0523/article/details/100009783 知识点涉及怎么结合gulp、w...

天府云创
08/22
0
0
前端工程化——构建工具选型

注:文章源于2017年8月的一次内部分享,部分数据可能已经过时。 一、什么是前端工程化 前端工程化是依据业务特点,将前端开发的规范、流程、技术、工具、经验等形成规范并建立成一种标准的体...

Bellhe
2018/01/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JDBC 连接数据库的流程?

加载 JDBC 驱动程序 利用 url,user,password 创建数据库连接 创建 statement 对象执行 sql 语句 返回查询结果 resultset 关闭连接,释放 JDBC 资源。关闭的顺序与开启的顺序相反:resultset...

happywe
25分钟前
2
0
如何让视频加速播放

当下的视频工作者越来越多,很多人在闲暇时间也会制作一些好玩有趣的短视频上传一些社交媒体。下面分享一个让视频加速播放的软件以及制作方法,学会这个方法后,可以制作一些有趣的加速视频啦...

白米稀饭2019
33分钟前
2
0
生成带图片的二维码

1,pom.xml 中 <!-- ZXing --><dependency> <groupId>com.google.zxing</groupId> <artifactId>core</artifactId> <version>3.3.3</version></dependency><dependency......

简小姐
42分钟前
3
0
可能是国内第一篇全面解读 Java 现状及趋势的文章

作者 | 张晓楠 Dragonwell JDK 最新版本 8.1.1-GA 发布,包括全新特性和更新! **导读:**InfoQ 发布《2019 中国 Java 发展趋势报告》,反映 Java 在中国发展的独特性,同时也希望大家对 Ja...

阿里巴巴云原生
56分钟前
3
0
Mybatis 配置详解

完整配置 mybatis-config.xml <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.......

xiaolyuh
57分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部