开发工具

使用gulp编译less

gulp, less

学习前端，有时候配置环境，真的是一把辛酸一把泪，虽然网上不乏各式各样详细的教程，但是总有那么一点点的瑕疵，或者是因为自己有些地方理解不了，结果就往往卡在一个地方一筹莫展。

今天的收获

主要步骤

1. 安装最新版本的Node.js

2. 全局安装gulp

  • 桌面直接打开Windows的命令行安装，代码如下
1
npm install gulp -g

3. 创建gulp项目和局部安装gulp

  • 局部安装与全局安装不同，局部安装需要进入你所需要的前端project的文件夹里面。所以在局部安装之前，需要先在合适的盘建立一个工程文件夹，比如我在E盘的MyCode文件夹里面的ife.baidu文件夹建立了一个task1-9的文件夹，在这个文件夹里面有新建了一个HTML文件，style文件夹，less文件夹等
  • 用Windows的命令行先进入task1-9文件夹
    进入项目文件夹
  • 创建gulp项目（就是进入文件夹后再用命令行）
1
npm init

然后会出现一大段的文字，提示你输入一些信息，网上找的图：
创建gulp项目
然后就会发现task-1-9文件下多了一个package.json文件。

  • 局部安装gulp（注意同样在文件夹在输入命令行）
1
$ npm install gulp --save-dev

然后你的task-1-9文件夹又多了一个node_modules文件夹，里面有好多文件。

4. 本地安装gulp插件（以less插件为例）（文件夹内执行）

1
npm install gulp-less --save-dev

全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能

5. 新建和编辑gulpfile.js文件

  • 在文件夹下新建一个gulpfile.js文件
  • 然后按照以下说明编写gulpfile.js文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 获取 gulp
var gulp = require('gulp');
// 获取 gulp-less 模块
var less = require('gulp-less');
// 编译less
// 在命令行输入 gulp less 启动此任务
gulp.task('less', function () {
    // 1. 找到 less 文件，需提前项目文件夹里面新建一个less文件
    //再在less文件夹里新建一个less文件，文件的名字可自定义，具体看下图的我的文件结构
    gulp.src('less/*.less')
    // 2. 编译为css
        .pipe(less())
    // 3. 另存文件，同理需要在项目文件夹中新建一个style的文件。
        .pipe(gulp.dest('style/css'));
});
// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
    // 监听文件修改，当文件被修改则执行 less 任务
    gulp.watch('less/**.less', ['less']);
});
// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 less 任务和 auto 任务
gulp.task('default', ['less', 'auto']);

文件结构

  • 其中的index.css文件是步骤6才生成的。

6. 运行gulp

  • 在项目文件夹中打开命令行，如第5点的代码显示，直接执行以下命令即可,因为default已经包含了less方法和auto方法。
1
gulp default

当然也可以分别来执行

1
2
gulp less
gulp auto

运行的结果就是，你可以一边编写less文件，一般自动生成 CSS文件了，赶紧去试一试吧。

补充

  1. gulp中文API
  2. 编译less只是gulp功能的一小部分，还有很多功能需要去学习。
分享到