了不起的任务运行器Gulp基础教程
发布在任务运行器Gulp研究2014年1月9日view:20940
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

学习gulp最好的一点是它真的非常简单!你只需要五个步骤就可以开始使用gulp,现在我们开始学习怎样使用gulp。

步骤一 – 安装Node

在Node官方网站上下载Node的安装包,在电脑中安装即可,如果你的电脑是Linux系统可能会稍微麻烦一些,但是Node官方网上的教程非常的详细,你可以跟着教程一步一步安装,非常简单。

步骤二 – 了解命令行

你现在可能对命令行还不是那么熟悉,但是要使用gulp你应该去熟悉它。一开始你可能会感到有些不适应,但是你一旦掌握了命令行你便可以运行不同的命令行应用比如Sass、Yeoman以及Git。这些工具都与你的日常工作都是非常有用的。

如果你熟悉命令行,可以直接跳到第四步。

下面是一个简单的例子,打开你的命令行界面然后我们输入并运行一条命令来确保Node已经正确的安装了:

node -v   

输入这条命令然后按下enter键,然后你会在下一行得到一个安装的Node的版本号。

现在,我们来对npm做同样的事。

npm -v   

再一次的,它在下一行反悔了一个npm的版本号。

如果你没有得到一个回复,那么意味着Node没有正确的安装或者你可能需要重启你的命令行应用。如果在重启之后依然没有反应,那么回到安装步骤重来一遍。

步骤三 – 导航到你的项目文件夹

现在我们已经接触了我们的命令行界面并且知道应该怎样和它交流了,我们的下一个步骤是导航到项目文件夹。幸运的是,我们只需要运行两个命令来改变目录并且看看目录中有些什么东西。这两个命令分别是ls – 列出目录下的项目 – 以及cd – 改变目录。

一旦你熟悉了ls和cd命令,我们需要导航到我们的项目文件夹。你的项目文件夹放在什么地方完全由你决定,在下面的例子汇总就是我放置我的项目文件夹的地方:

cd /Applications/XAMPP/xamppfiles/htdocs/my-project   

一旦你导航到你的项目文件夹,我们就可以开始安装gulp了!

第四步 – 安装gulp

你现在已经熟悉了命令行并且已经知道我们怎样和它交流了 – 你甚至已经知道在文件系统中你所处的为止。现在,我们就来做一些有意思的事情。用npm来安装gulp!

输入以下命令:

sudo npm install -g gulp   

安装完成之后,我们用一条命令行来确认gulp是否安装正确:

gulp -v  

想以前一样,如果安装正确的话,在下一行会返回一个版本号。

接着,我们还需要在本地安装gulp:

nom install --save-dev gulp   

唯一不同的是我们在这里使用了–save-dev标示符,它用来告诉npm将我们添加的依赖模块放入package.json文件的devDependencies字段中。

既然现在gulp已经安装好了,下一步就是设置我们的gulpfile。

第五步 – 设置我们的Gulpfile & 运行Gulp

一旦Gulp安装完成之后,我们需要给它一些指令以便让它知道需要运行一些什么任务。但是,首先,我们需要清楚的指出需要在项目中运行什么任务。

在实际的项目中,我们的老板可能会让我们做以下这些事情:

  • 检查JavaScript代码错误
  • 编译Sass文件
  • 拼接JavaScript文件
  • 精简并且重命名拼接后的文件

使用Gulp,你可以轻松的完成以上这些任务,你只需要完成以下几个步骤:

1.安装需要的插件

npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-renam --save-dev   

上面的命令行将会安装我们所需要的所有插件并且将它么添加到package.json文件的devDependencies字段中。

2.创建我们的gulpfile

现在所有的插件都可以使用了,我们可以开始编写我们的gulpfile文件并且指示gulp来执行这些任务了。

在我们正是编写代码之前,需要了解的一点是gulp仅仅只有5个方法。所有的5个方法如下:task、run、watch、src以及dest。你只需要用这5个方法就可以编写所有的任务。

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');

//lint task  

gulp.task('jshint',function(){
    gulp.src('./js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

//编译sass  

gulp.task('sass',function(){
    gulp.src('./scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./css'));
});  

//拼接、简化JS文件   

gulp.task('scripts',function(){
    gulp.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','sass','scripts');

    //监视我们JS文件的变化   
    gulp.watch('./js/*.js',function(){
        gulp.run('lint','scripts');
    });

    //监视scss文件的变化   
    gulp.watch('./scss/*.scss',function(){
        gulp.run('sass');
    });
});   

现在,我们来看一看上面代码的各个部分

核心&插件

//包含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');   

这段代码包含了gulp的核心,以及和任务相关的插件。接下来,我们将分别设置我们的任务。这些任务有lint,sass,scripts和default。

Lint任务

// Lint任务
gulp.task('lint', function() {
    gulp.src('./js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});  

我们的lint任务将检查我们js/目录下的所有JavaScript文件并确保我们的代码没有错误。

Sass任务

//编译我们的Sass  
gulp.task('sass', function() {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
}); 

Sass任务编译我们的scss/文件夹下的任何Sass文件到.css文件并将它们存储在css/文件夹下。

Scripts任务

//拼接并精简JS文件
gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
});   

Scripts任务拼接所有位于js/文件夹下的JavaScript文件并将结果输出到我们的dist/文件夹下。接着gulp将会精简这个拼接文件,重命名并将它存储在dist/文件夹下。

Default任务

//默认任务   
gulp.task('default',function(){
    gulp.run('lint','sass','scripts');

    //监视我们JS文件的变化   
    gulp.watch('./js/*.js',function(){
        gulp.run('lint','scripts');
    });

    //监视scss文件的变化   
    gulp.watch('./scss/*.scss',function(){
        gulp.run('sass');
    });
});

最后,我们设置了default任务,它基本上是将前面设置的任务进行了一个包装。它使用.run()方法来引用并运行我们在上面定义的任务。.watch()方法用来持续的检查指定文件夹中的文件是否发生了变化。如果是,它将运行我们在它内部指定的所有任务。

现在,只剩下运行gulp了。回到我们的命令行界面然后输入:

gulp   

这条命令将调用gulp并运行我们在default中定义的所有任务。因此,换句话说上面的命令等价于运行

gulp default  

另外,我们并不是非要运行default任务。我们可以在任何时候运行我们定义的任何任务。你可以轻松的调用gulp来执行任何任务。例如,我们可以在任何时间手动运行我们的sass任务:

gulp sass   

很酷,不是吗?

总结

到目前为止,你应该已经学会使用gulp了。现在我们总结一下上面学到的东西:

1.我们学会了如何安装Node。
2.我们了解了一些命令行的东西。
3.我们学到了如何使用命令行导航到项目文件夹。
4.我们学到了如何使用npm来安装gulp。
5.我们学到了如何编写gulpfile文件并运行gulp。

最后,我真心的希望这篇文章能带领你开始使用gulp并对你的工作有所帮助。


本文译自getting stated with gulp,原文地址http://travismaynard.com/writing/getting-started-with-gulp

如果你觉得本文对你有帮助,请点击下面的链接为我提供赞助。

点击这里为我提供赞助

评论
发表评论
1年前
赞了此文章!
4年前
添加了一枚【评注】:请问是需要进到单独某个项目的文件夹吗?如果是这样那不是每个项目都得装一次?这样不是很容易重复安装吗?
4年前
添加了一枚【评注】:这边应该再加个.pipe(gulp.dest('./dist'));吧,否则all.min.js不会存下来
4年前
添加了一枚【评注】:rename 吧
4年前
添加了一枚【评注】:rename 吧
5年前
添加了一枚【评注】:是不是根据项目的package.json文件里面需要的所要插件来安装 gulp?
5年前
赞了此文章!
5年前
添加了一枚【评注】:npm?
5年前
添加了一枚【评注】:返回
6年前

今天把以前grunt的配置用gulp写了一遍,发现gulp-uglify报错,也不知道啥原因…

6年前

mark

6年前

不错!mark下!

6年前

@xmlovedandan 那就还是换回用grunt,毕竟新东西可能还不太成熟。。。

6年前

可是,它的图片压缩组件和html 美化组件都有问题啊。。。。你们有用过嘛?

6年前

@mdemo

6年前

@芋头 markdown样式有bug吧

6年前
gulp.task('jshint',function(){
    gulp.src('./js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

这里的jslint应该是lint吧

6年前

@羽音篠之 还真是没想到这个问题。。。

6年前

标题是 neta 《了不起的盖茨比》么……233……

WRITTEN BY
张小俊128
Intern in Baidu mobile search department。认真工作,努力钻研,期待未来更多可能。
TA的新浪微博
PUBLISHED IN
任务运行器Gulp研究

关于任务运行器Gulp的研究文章

我的收藏