关键词:
前言
新人使用gulp
的一个记录。
首先对于第一个新事物,我会问gulp
这是什么?
答:gulp
是一个自动化构建工具,它可以做一些自动化的任务,比如:
- 检查Javascript
- 编译Sass(或Less之类的)文件
- 合并Javascript
- 压缩并重命名合并后的Javascript
- 变更静态资源
- 给静态资源添加 md5
- 合并雪碧图
- 自动刷新浏览器
- ...
以前为了提高网站的访问速度,这些都是人工做的,现在gulp
可以很好的完成他们,因为它们是流程化的,程序员就是极客,这种能用程序做的当然不用人来咯。
好了,想必到这大家也对gulp有了初步的了解,下面开始进入使用流程。
gulp的使用
gulp的使用很简单。
三步走起!!!
项目目录
同样,我们先建立一个新项目用来入门。项目的目录结构如下:
这里我先简单贴出里面的具体代码,我们最最重要的是 gulpfile.js
首先是两个js文件,咱们这次只是为了测试,所以代码都很简单。
header.js
和 index.js
//header.js
function A() {
console.log("I am A");
}
//index.js
function B() {
console.log("I am B");
}
下面再看看 index.less
// index.less
@color: #4D926F;
#header {
background-color: @color;
}
h2 {
color: @color;
}
再下面是 index.html
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../../dist/css/index.css" />
<title>Title</title>
</head>
<body>
</body>
</html>
Gulp配置文件
最最最重要的 gulpfile.js
闪亮登场,这段我们好好讲讲,非常重要。
gulp只有五个方法: task , run , watch , src ,和 dest
task
这个API用来创建任务,在命令行下可以输入 gulp test 来执行test的任务。run
这个API用来运行任务watch
这个API用来监听任务。src
这个API设置需要处理的文件的路径,可以是多个文件以数组的形式[main.scss,vender.scss],也可以是正则表达式/*/.scss。dest
这个API设置生成文件的路径,一个任务可以有多个生成路径,一个可以输出未压缩的版本,另一个可以输出压缩后的版本。
其实整个gulp的配置文件,基本上都是在做一些任务的配置,比如创建任务,监听任务等等。
// gulpfile.js
// 引入 gulp
var gulp = require(‘gulp‘);
// 引入组件
var jshint = require(‘gulp-jshint‘);
var sass = require(‘gulp-sass‘);
var concat = require(‘gulp-concat‘);
var uglify = require(‘gulp-uglify‘);
var rename = require(‘gulp-rename‘);
// 编译less
gulp.task(‘less‘, function() {
gulp.src(‘src/less/*.less‘) //该任务针对的文件
.pipe(sass()) //该任务调用的模块
.pipe(gulp.dest(‘./dist/css‘)); //将会在dist/css下生成index.css
});
// 检查脚本
gulp.task(‘lint‘, function() {
gulp.src(‘src/js/*.js‘)
.pipe(jshint())
.pipe(jshint.reporter(‘default‘));
});
// 合并,压缩文件
gulp.task(‘scripts‘, function() {
gulp.src(‘src/js/*.js‘)
.pipe(concat(‘all.js‘))
.pipe(gulp.dest(‘./dist‘))
.pipe(rename(‘all.min.js‘))
.pipe(uglify())
.pipe(gulp.dest(‘./dist‘));
});
// 默认任务
gulp.task(‘default‘, function(){
gulp.run(‘lint‘, ‘less‘, ‘scripts‘);
// 监听JS文件变化
gulp.watch(‘src/js/*.js‘, function(){
gulp.run(‘lint‘, ‘less‘, ‘scripts‘); //多个任务就直接往后加即可
});
// 监听less文件变化
gulp.watch(‘src/less/*.less‘, function(){
gulp.run(‘lint‘, ‘less‘, ‘scripts‘);
});
});
// gulp.task(name[, deps], fn) 定义任务 name:任务名称 deps:依赖任务名称 fn:回调函数
// gulp.src(globs[, options]) 执行任务处理的文件 globs:处理的文件路径(字符串或者字符串数组)
// gulp.dest(path[, options]) 处理完后文件生成路径
这时,我们创建了一个基于其他任务的default
任务。使用 .run()
方法关联和运行我们上面定义的任务,使用 .watch()
方法去监听指定目录的文件变化,当有文件变化时,会运行回调定义的其他任务,就会自动重新编译打包了,就是重新运行上面的任务。
上面的注释说的都很清楚,初步的,其他的就不介绍了。
好了,到现在为止,我们的代码已经写完了。
执行Gulp任务
下面咱们开始执行自动化任务命令。gulp xxx
, 这里的 xxx
就是咱们上面写的 task
,咱们还可以写 gulp less , gulp lint...
结果如下:
而且文件都是编译好的。
// index.css less编译后的,很强大吧
body {
background-color: #4D926F;
}
h2 {
color: #4D926F;
}
// all.js 合并了 index.js header.js的内容
function B() {
console.log("I am B");
}
function A() {
console.log("I am A");
}
//all.min.js 被压缩后的
function B(){console.log("I am B")}function A(){console.log("I am A")}
另外说下 gulp.watch
这个是监听文件变化,我们修改一下 index.less
,gulp
就会自动重新执行三个Task,具体就不演示了。
这时候你打开你的views
下的index.html
,能见到以下画面,说明你成功了。
代码
本文代码已经上传到 github上,喜欢的话,给个star呗。
https://github.com/XuXiaoGH/gulptest/tree/master
写在最后
本文是一个gulp的入门级教程,如有错误还请大牛指正,让小子也有得进步。
如果对你有所帮助,那是我最大的荣幸。
对了,兄台,对你有帮助的话能否点个赞再走。
原文链接:http://www.jianshu.com/p/c0b7db11079c
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
gulp使用1-入门指南
入门指南1.全局安装gulp:$npminstall--globalgulp或使用cnpm2.作为项目的开发依赖(devDependencies)安装:$npminstall--save-devgulp3.在项目根目录下创建一个名为 gulpfile.js 的文件:vargulp=require(‘gulp‘);gulp.task(‘default‘,function(){// 查看详情
gulp入门(代码片段)
...些资料,学会了怎么使用gulp进行压缩,特地写个简单的入门操作指南,加深自己的印象。gulp能够实现很多功能,在这里我就以自己使用的压缩js文件为例子进行介绍1.安装nmpNPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码... 查看详情
ffmpeg从入门到精通——进阶篇,sei那些事儿
前言在直播应用的开发过程中,如果把主播端消息事件传递到观众端,一般会以InstantMessaging(即时通讯)的方式传递过去,但因为消息分发通道和直播通道是分开的,因此消息与直播音视频数据的同步性就会出现很多问题。那... 查看详情
glup快速入门整理(代码片段)
Gulp介绍中文主页:http://www.gulpjs.com.cn/gulp是与grunt功能类似的前端项目构建工具,也是基于Nodejs的自动任务运行器能自动化地完成javascript/coffee/sass/less/html/image/css等文件的合并、压缩、检查、监听文件变化、浏览器自动刷新、测试... 查看详情
浏览器cookie那些事儿
1、介绍①什么是cookie页面用来保存信息--比如,自动登录,记住用户名等cookie的特性--同一个网站中所有页面共享一套cookie--数量大小有限--过期时间js中使用cookiedocument.cookie②cookie的使用设置cookie--格式:名字=值--不会覆盖--... 查看详情
前端那些事儿
借鉴前端工程——基础篇文章里的内容,觉着科普的蛮好的,对我这样的初级蛮受用。整理一下直接拿来贴了。1.库/框架选型:Animate.css:强大的css3动画预设库jQueryVue.jsReactunderscore.js:精巧而强大的实用库BootstrapBackbone.jsFontAwesome:... 查看详情
注解的那些事儿|注解的使用(代码片段)
...章首发于【博客园-陈树义】,点击跳转到原文《注解的那些事儿(三)|注解的使用》学会了如何定义自定义注解,那还要会用起来才行。其实自定义注解使用也非常简单,像我们上篇文章定义的一个Sweet注解。public@interfaceSweetSt... 查看详情
gulp入门(代码片段)
...些资料,学会了怎么使用gulp进行压缩,特地写个简单的入门操作指南,加深自己的印象。gulp能够实现很多功能,在这里我就以自己使用的压缩js文件为例子进行介绍1.安装nmpNPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码... 查看详情
gulp的使用以及gulp新手入门教程
Gulp新手入门教程原文 http://w3ctrain.com/2015/12/22/gulp-for-beginners/Gulp是一个自动化工具,前端开发者可以使用它来处理常见任务:搭建web服务器文件保存时自动重载浏览器使用预处理器如Sass、LESS优化资源,比如压缩CSS、JavaScript... 查看详情
gulp的简单应用
.../gulpfile.js名字必须是这个//这儿文件告诉gup工具,具体要做那些事情//1.引入gulp模块//vargulp=require(‘gulp‘);//2.告诉gulp去执行某个任务//gulp.task("task.name",function(){////dosomething////});//gulp.task("bac 查看详情
gulp入门学习
一、gulp简介 gulp是一个自动化构建工具。在开发过工程中,能够使用gulp对项目进行自动构建,大大提高工作效率。二、安装gulp 在安装gulp之前先要确认已经正确安装了node.js,然后在项目根目录下安装gul... 查看详情
git使用那些事儿
git使用经验总结一、克隆项目1.通过GitLab查询项目 的地址2.克隆项目(gitAddr需从gitLab中查得) gitclonegitAddr3.切分支切到dev分支 gitcheckoutdev4.转换为eclipse项目 mvneclipse:eclipse 5.导入到eclipse中 二、提交流程1.&nbs... 查看详情
gulp入门及简单使用
前言什么是gulp?gulp有什么用?为什么用gulp?gulp是前端开发的一种构建工具。构建工具可以帮助我们工程化地开发项目,比如搭建本地服务器、编译CSS预处理器、保存文件后自动刷新浏览器而不用我们手动去刷新、多个文... 查看详情
echarts使用中的那些事儿
然而第二天的事情你怎么能猜到客户的心思呢;客户:右边的是啥?偶:可放大缩小查看各个时期的数据。客户:把它去掉吧,全部直观显示。偶:哦,不过数据过多的话会导致页面过长的。客户:只有你知道这个可以拉伸,我... 查看详情
handler使用的那些事儿(代码片段)
对任何有开发经验的童鞋,对Handler肯定是如雷贯耳,使用也必定非常熟练,当现在我还是想对其来个梳理,总结下常见的疑问: 1.常听人说mHandler.obtainMessage(what,obj).sendToTarget()要比Messagemsg=newMessage... 查看详情
vuex那些事儿
一、vuex的引用方法1、用script标签<scriptsrc="https://unpkg.com/vuex"></script>2、npm安装cnpminstallvuex//在js文件引入varVue=require(‘vue‘)varVuex=require(‘vuex‘)Vue.use(Vuex) 查看详情
续gulp使用入门编译sass
使用gulp编译SassSass是一种CSS的开发工具,提供了许多便利的写法,大大节省了开发者的时间,使得CSS的开发,变得简单和可维护。安装npminstallgulp-sass(--save-dev)括号中的可选基本用法SomethinglikethiswillcompileyourSassfiles:‘usestrict‘;varg... 查看详情
gulp快速入门
Gulp是基于流的前端自动化构建工具使用步骤:1.安装node和npm 访问国外服务器网速不好时,安装依赖模块时会缺少文件。可以安装国内的镜像,之后使用cnpm命令代替npm命令。 npminstallcnpm-g--registry=https://registry.npm.taobao.org2.... 查看详情