Gulp新人指南-1 基础介绍

原文:https://css-tricks.com/gulp-for-beginners/

翻译

Gulp是一个工具,帮你解决许多web开发的task,经常用于以下情况:

  • 启动一个web服务
  • 自动重新加载页面,当文件保存的时候
  • 支持预处理Sass Less
  • 优化CSS,JS,图片

可以做的事情还有很多,甚至构建一个静态页面生成器。

Gulp很棒棒~学习怎么使用它吧。

 

这是此文章目的所在。

Gulp与Grunt相比,更简洁,更快。

 

安装Gulp

安装Node.js(Node)

下载地址:downloading the package installer from Node’s website.

当安装完成,使用下面的命令安装gulp:(sudo 只有mac等*nix系统才需要)

$ sudo npm install gulp -g

-g 是全局安装

创建 Gulp Project

首先,我们创建一个project的根目录,然后CD进去,执行npm init 命令:

# ... from within our project folder
$ npm init

npm init 会生成package.json 跟着输入就生成了。

 

当 package.json 文件创建后, 安装Gulp依赖:

$ npm install gulp --save-dev

我们将Gulp装到project里面.

package.json会变成下面的样子

package

配置项目文件结构

Gulp可以支持任何文件结构不过我们最好规范一下.

For this article, we will use the structure of a generic webapp:

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

在这这个结构里,app是开发目录,dist是发布目录,优化压缩打包后的文件就会放里面。

所有的代码会放到app目录下。

好的,现在开始创建第一个Gulp task.

第一个Gulp Task

第一步Require.

var gulp = require('gulp');

require会在node_module文档下找gulp包,找到后就赋值给gulp.

现在可以写一个gulp任务,语法如下:

gulp.task('task-name', function() {
  // Stuff here
});

task-name是任务名,任何时候要运行都用到,还可以用命令行gulp task-name来运行.

测试一个hello.

gulp.task('hello', function() {
  console.log('Hello Zell');
});

使用命令行也可以创建.

$ gulp hello

命令行会返回日志.

Gulp任务一般会更复杂一些,一般会包含两个或以上的方法外加上一些Gulp插件.

一个真实点的例子:

gulp.task('task-name', function () {
  return gulp.src('source-files') // Get source files with gulp.src
    .pipe(aGulpPlugin()) // Sends it through a gulp plugin
    .pipe(gulp.dest('destination')) // Outputs the file in the destination folder
})

gulp.src 这个告诉Gulp任务是什么文件用到这个任务。

gulp.dest 这个指定任务完成后输出路径.

来做一个真正的Task,将Sass编译成CSS文件。

Gulp预编译

使用gulp-sass插件可以将Sass编译成CSS.

使用–save-dev保证gulp-sass添加到package.jsondevDependencies .

$ npm install gulp-sass --save-dev

使用require引入.

var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');

创建一个styles.scss文件到app/scss目录.

想要导出styles.css 到’app/css目录设置destination.

代码修改如下.

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

在sytles.scss文件添加如下代码.

// styles.scss
.testing {
  width: percentage(5/7);
}

如果现在命令行使用gulp sass命令,你现在会见到一个styles.css在app/css里创建,对应的宽度如下.

/* styles.css */
.testing {
  width: 71.42857%; 
}

现在sass编译完成

想要编译超过一个.scss文件,可以用Node globs.

FYI:Gulp-sass 使用LibSass转化Sass,比ruby-based方法快很多。当然也可以继续用gulp-ruby-sass或者gulp-compass这种Ruby转化方法。

发表评论

邮箱地址不会被公开。