文档章节

前端工具gulp的用途和使用方法

writeademo
 writeademo
发布于 2016/10/18 14:12
字数 584
阅读 49
收藏 0

前端工具gulp的用途和使用方法

  在接触前端开始就听说过grunt和gulp是很叼的前端构建工具,但不知道到底有多叼,只是听说可以自动编译less,sass为css,目前还没有使用less和sass,所以也就没有尝试使用grunt和gulp。但是作为一个技术爱好者还是经不住诱惑,照着网上的教程简单使用了一下,总算是知道有什么用处了,因为都说gulp比grunt更简单好用,就以gulp的使用方法为例来说明一下。
    1.文件合并:关于文件合并很多人存在这样的疑惑,在前端开发中到底该把所有js和css写在一个文件里还是各个页面分开写,我的建议是开发的时候分开写,上线的时候合并为一个,这样的好处是对于浏览器来说,不同页面中相同的文件默认会请求一次缓存下来,其他页面请求相同文件时就直接从缓存中读取,减少文件的网络请求可以提高网页速度,所以文件合并的是很有必要的。


    2.文件压缩:既然都合并了,何不再压缩一下呢


    3.语法检查:这个功能一般会和下面第4条功能配合使用,当文件修改的时候检查是否有语法错误,并在命令行中输出错误信息。


    4.监听文件变化:监听某个目录下文件是否修改,修改的话就执行特定的操作,比如上面几个操作。
    以上4点是比较常用的功能,更多功能根据自己需要添加

  1. var gulp = require('gulp');
  2. var jshint = require('gulp-jshint');//语法检查
  3. var concat = require('gulp-concat');//合并文件
  4. var uglify = require('gulp-uglify');//压缩代码
  5. var rename = require('gulp-rename');//重命名
  6. // 语法检查
  7. gulp.task('jshint', function () {
  8. return gulp.src('public/javascripts/*.js')
  9. .pipe(jshint())
  10. .pipe(jshint.reporter('default'));
  11. });
  12. // 合并文件之后压缩代码
  13. gulp.task('minify', function (){
  14. return gulp.src('public/javascripts/*.js')
  15. .pipe(concat('all.js'))
  16. .pipe(gulp.dest('public/javascripts/dist'))
  17. .pipe(uglify())
  18. .pipe(rename('all.min.js'))
  19. .pipe(gulp.dest('public/javascripts/dist'));
  20. });
  21. // 监视文件的变化
  22. gulp.task('watch', function () {
  23. gulp.watch('public/javascripts/*.js', ['jshint', 'minify']);
  24. });
  25. // 注册缺省任务
  26. gulp.task('default', ['jshint', 'minify', 'watch']);
  27. // gulp.task('default', ['jshint', 'minify']);

目录结构:

 

 

 

 

本文转载自:

writeademo
粉丝 25
博文 632
码字总数 229415
作品 0
东城
私信 提问
前端知识网站总汇

1.前端面试题解说及人力问题 www.haorooms.com/post/qiandu… 2.web Sockets的介绍说明 www.runoob.com/html/html5-… vue组件之间的通讯 whutzkj.space/2017/08/05/… MVC与MVVM的区别 www....

xuhaoxin123
2017/11/10
0
0
gulp构建前端工程

什么是gulp? 是新一代的前端项目构建工具,你可以使用及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的和代码,甚至压缩你的图片,仅有少量的,所以非常容易学习。 使用 方式处...

半张一块
2016/07/27
2.8K
8
Gulp 前端模版插件--Gulp-art-include

Gulp-art-include 基于腾讯 artTemplate 的 gulp 前端模版插件,功能类似于 gulp-file-include 插件。在编写模版时可以使用全部 artTemplate 的语法,引用模版时可以传递 JSON 数据用于渲染模...

蔡晓东
2017/01/09
615
0
HTML5拓扑图编辑器项目 - Graph.Editor

拓扑图编辑器介绍 项目地址:https://github.com/samsha/graph.editor 在线演示:http://demo.qunee.com/editor/ Graph.Editor是一款基于HTML5技术的拓补图编辑器,采用jquery插件的形式,是...

nosand
2015/01/17
2.6K
0
Web 使用webpack构建前端项目

好久没写技术博客了, 原因在于最近在学习前端方面的技术, 熟悉我的同学都知道, 之前我有使用Vue搭建了一个个人简历, 体验了一把最新的前端技术, 但之前我们使用的是vue-cli脚手架工具, 对于如...

Castie1
2017/09/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
昨天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
昨天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部