JS那些事儿——Gulp的入门使用

前言

新人使用gulp的一个记录。

首先对于第一个新事物,我会问gulp这是什么?

答:gulp是一个自动化构建工具,它可以做一些自动化的任务,比如:

  • 检查Javascript
  • 编译Sass(或Less之类的)文件
  • 合并Javascript
  • 压缩并重命名合并后的Javascript
  • 变更静态资源
  • 给静态资源添加 md5
  • 合并雪碧图
  • 自动刷新浏览器
  • ...

以前为了提高网站的访问速度,这些都是人工做的,现在gulp可以很好的完成他们,因为它们是流程化的,程序员就是极客,这种能用程序做的当然不用人来咯。

好了,想必到这大家也对gulp有了初步的了解,下面开始进入使用流程。

gulp的使用

gulp的使用很简单。

三步走起!!!

项目目录

同样,我们先建立一个新项目用来入门。项目的目录结构如下:

这里我先简单贴出里面的具体代码,我们最最重要的是 gulpfile.js

首先是两个js文件,咱们这次只是为了测试,所以代码都很简单。

header.jsindex.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.lessgulp就会自动重新执行三个Task,具体就不演示了。

这时候你打开你的views下的index.html,能见到以下画面,说明你成功了。

代码

本文代码已经上传到 github上,喜欢的话,给个star呗。

https://github.com/XuXiaoGH/gulptest/tree/master

写在最后

本文是一个gulp的入门级教程,如有错误还请大牛指正,让小子也有得进步。
如果对你有所帮助,那是我最大的荣幸。

对了,兄台,对你有帮助的话能否点个赞再走。

文/夏风轻语(简书作者)
原文链接:http://www.jianshu.com/p/c0b7db11079c
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

时间: 2024-10-10 06:44:46

JS那些事儿——Gulp的入门使用的相关文章

Gulp新手入门教程

Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass.LESS 优化资源,比如压缩CSS.JavaScript.压缩图片 当然Gulp能做的远不止这些.如果你够疯狂,你甚至可以使用它搭建一个静态页面生成器.Gulp真的足够强大,但你必须学会驾驭它. 这是这篇文章的主要目的.帮助你了解Gulp的基础用法,助你早日完成一统天下的大业. 在我们深入了解之前,我们先来说说为什么是Gulp. 为什么是Gulp? 类似Gulp的

gulp快速入门

今天刚入职了一家新公司,结果明天就要开始项目了.上级说要用gulp来打包代码,所以今晚花了一晚来看这个gulp, 可以说已经入门了.所以做一个小小的总结 : 首先全局安装gulp npm install gulp -g   然后我在F:/盘新建一个gulpDemo路径, 进入到这里面,在本地再次安装一次gulp,我也不知道为什么本地还要安装.你就装吧,哈哈 不过,在安装之前,确保 gulpDemo 这个文件夹里有package.json 这个文件 这个文件如下: /package.json {

gulp的使用以及Gulp新手入门教程

Gulp新手入门教程 原文  http://w3ctrain.com/2015/12/22/gulp-for-beginners/ Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass.LESS 优化资源,比如压缩CSS.JavaScript.压缩图片 当然Gulp能做的远不止这些.如果你够疯狂,你甚至可以使用它搭建一个静态页面生成器.Gulp真的足够强大,但你必须学会驾驭它. 这是这篇文章的主要目的.帮助你了解Gu

js版本控制之gulp

微信浏览器有严重的缓存问题,所以在网上百度了一下 发现好多关于gulp 那就用它 ,再使用的过程中遇到了我不知道该怎么说的吭  幸好为时不晚 下面做一些记录 第一种:在引入文件后面加  [email protected]@hash 1 新建一个项目如下 其中index.html 页面如下 <html> <head> <link rel="stylesheet" href="../styles/[email protected]@hash"

gulp详细入门教程

简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率. gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成,并监听文件在改动后重复指定的这些步骤.在实现上

转: Vue.js——60分钟组件快速入门(上篇)

转自: http://www.cnblogs.com/keepfool/p/5625583.html Vue.js——60分钟组件快速入门(上篇) 组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素. 本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或

【three.js详解之一】入门篇

[three.js详解之一]入门篇 开场白 webGL可以让我们在canvas上实现3D效果.而three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的原生接口从这款框架入手是一个不错的选择. 博主目前也在学习three.js,发现相关资料非常稀少,甚至官方的api文档也非常粗糙,很多效果需要自己慢慢敲代码摸索.所以我写这个教程的目的一是自己总结,二是与大家分享. 本篇是系列教程的第一篇:入门篇.在这篇文章中,我将以一个简单的demo为例,阐述thre

gulp-uglify《JS压缩》----gulp系列(四)

本节实现JS压缩,在实现压缩前,先配置JS任务,设置源目录和输出目录. 在系列(三)代码的基础上,再进行扩展. 1.找到gulp->config.js,对JS进行源目录(src->img)和输出目录(build->img)的配置: 2.gulp->tasks里新建JS任务,如下图: 3.同时在default任务序列里添加js任务: gulp.task('default', ['less', 'images', 'js', 'watch']); 4.最后在watch里添加对src-&

gulp.js 自动化构建工具学习入门

一.基本安装 1.安装gulp 1 $ npm install --global gulp 2.作为项目的开发依赖安装 1 $ npm install --save-dev gulp 3.在项目根目录下创建 gulpfile.js 的文件 1 var gulp = require('gulp') 2 3 gulp.task('default',function(){ 4 //将你的默认任务代码放在这里 5 }) 4.运行gulp: $ gulp 以下文章参考来源:作者:Rin阳    链接:ht