3、以gulp-less插件为例演示gulp的使用方法

阅读() @2019-03-17 16:05:18

gulp全局和本地都安装成功之后,就可以选择性的使用gulp插件了,以gulp-less插件为例。

如果对less不熟悉,可以查看《less之可编译型CSS型语言使用笔记》。

第一步:安装我们需要使用的gulp插件

命令行进入项目文件夹,然后执行npm install gulp-less --save-dev

将会安装在node_modules的gulp-less目录下,可以到项目中去查看。

第二步:新建gulpFile.js文件(这个文件名可以自定义)

gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件。

新建完成之后,打开这个js文件,然后输入内容如下:

//导入你所需要的工具包(node_modules里对应模块)
var gulp = require('gulp'),
    less = require('gulp-less');

//定义一个testLess任务(名称可以自定义)------注意:以下./less/style.less和./css两个路径都是相对gulpFile.js文件而言的
gulp.task('testLess', function(){
    gulp.src('./less/style.less')//该任务针对的文件
        .pipe(less())//该任务调用的模块
        .pipe(gulp.dest('./css'));//将会在css下生成index.css文件
});

第三步:运行gulpFile.js

方法一:命令行执行

在命令行中输入gulp 任务名称,如下图:

运行gulpFile文件

从第二步可知,testLess是我的任务名称。

看到命令行的运行结果之后,说明文件运行成功,我们可以到对应的css文件夹下去查看,发现less文件已经成功编译成css文件了。

less文件:

@color:#f00;
.rounded-corners(@radius:5px){
  border-radius:@radius;
}
#header{
  color:@color;
  .rounded-corners(10px);
}
#footer{
  .rounded-corners;
}

编译成功之后的css文件:

#header {
  color: #f00;
  border-radius: 10px;
}
#footer {
  border-radius: 5px;
}

方法二:在WebStorm工具中执行

将项目导入webstorm,右键gulpfile.js,选择”Show Gulp Tasks”打开Gulp窗口,若出现”No task found”,选择右键”Reload tasks”,双击任务名运行即可,如下图:

webstorm中运行gulpFile文件

完!

微信二维码