gulp入门教程

2016-11-08 本文已影响71人 debt

gulp是一个用来在web开发中完成一些自动化任务的工具，它常被用作以下任务：

启动一个web服务器；
保存代码时自动刷新浏览器；
预处理less,scss等；
优化压缩代码如CSS,JavaScript,HTML;

gulp不仅能完成上述任务，你甚至可以使用它来构建一个静态站点生成器。他相当强大，你可以利用他定制自己的一些任务。

why gulp?

像gulp之类的工具常常被称为build tools,因为这些工具通过执行一系列任务来构建网站。目前最流行的两个工具是gulp和grunt。两者主要的不同是你如何配置工作流，相比于grunt，gulp配置更简单同时也更快。

下面通过简单的配置来达到上面的4个任务。

installing gulp

首先需要依赖node环境，如有不清楚，请上官网查看如何安装。
npm install -g gulp，如果安装成功,gulp -v会打印出当前版本号。

creating a gulp project

创建一个文件夹gulp-project.
进入文件夹执行npm init初始化项目，一路回车。这时会自动创建package.json文件
执行npm install gulp --save-dev。安装成功后，可以看到gulp-project文件夹多了一个node_modules文件夹，另外package.json文件中也多了"devDependencies": { "gulp": "^3.9.1" }.
目前为止，我们已经准备好了gulp的环境，接下来让我们建立目录结构。

determining folder structure

建立如下目录,就是在gulp-project目录下建立app目录，dist目录和gulpfile.js文件。
app目录下建立相应的js，css等文件夹。

|- app/
     |- css/
     |- fonts/ 
     |- images/ 
     |- index.html 
     |- js/ 
     |- scss/ 
|- dist/ 
  |- gulpfile.js
  |- node_modules/ 
  |- package.json

上面结构的一点解释：

app目录就是主目录，项目中所有代码都编写在此目录下，dist内文件由gulpfiles.js内配置一系列任务生成。由此可见，主要工作流为app--->gulpfils.js-->dist。app相当于input，dist相当于output。gulpfiles相当于工厂。

writing you first gulp task

编写gulpfile.js

var gulp=require('gulp');
gulp.task('hello',function(){
console.log("hello world");
})

执行 gulp hello,就会打印出 hello world.

当然项目中很少让你打印hello world，更多的是下面这样的结构。

var gulp=require('gulp');
gulp.task('name',function(){
return gulp.src("source-files")
.pipe(plugin())
.pipe(gulp.dist("sistionation"))
})

gulp.src表示入口文件，经过相关插件，输出到gulp.dist

preprocessing with gulp

首先完成一个小任务，将sass编译为css。

安装相关插件。 npm install gulp-sass --save-dev
项目中包含该依赖。 var sass=require("gulp-sass");
scss文件夹下建立styles.scss文件，随便写一点scss,比如.testing { width: percentage(5/7);},然后更改gulpfile.js文件如如下

var gulp=require('gulp');
var sass=require('gulp-sass');
gulp.task('sass', function(){
  return gulp.src('app/scss/style.scss')
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('app/css'))
});

命令行执行gulp sass，看看发生了什么，css文件夹下自动生成了styles.css。

好的，第一个任务编译sass到此结束，是不是很简单！

watching sass files for change

gulp 提供了watch方法用来查看文件是否被保存。
gulp.watch("file-to-watch",["tasks","to","run"]).
如果我们想监听所有sass文件的改动，只需这样写

gulp.task('watch',function(){
    gulp.watch('app/scss/**/*.scss',['sass']);
})

这样每当我们修改scss文件时，就会调用sass的task，自动修改css文件。自动保存并编译算是实现了，那么我们如何在编译后实时刷新浏览器呢？我们继续往下看！

live-reloading with browser-sync

首先安装大名鼎鼎的browser-sync，不了解的google一下，非常强大的一个插件。