三分钟从零单排gulp-less配置

这周的某个晚上,室友拿着她写的todolist代码来找我做review,看到css文件是这个样子 三分钟从零单排gulp-less配置_第1张图片


“为什么不用less呢?”,我心痛的问她。

“不会。”

于是我推荐了一款小白级的less入门神器:Koala - a gui application for LESS, Sass, Compass and CoffeeScript compilation.

三分钟从零单排gulp-less配置_第2张图片安装之后,只要监听指定的文件夹就能做到实时编译,哪怕完全不会编程的同学也可以轻松搞定,简直是不要太容易。

如果只用嵌套和变量这些基本功能,less和sass其实并没有区别。不过对于win的用户来说,我比较推荐less,配置简单好用。原来的sass依赖ruby,而后确实出了node-sass,看起来是很美好的,但是要依赖VS2013,还要装win8.1SDK,新电脑买回来,就为了个sass,一言不合16G硬盘就没了!

“这个Koala真好用,但是用node控制台来搞less一定麻烦死了吧?”

“不是呀, 其实只要三分钟就可以搞定”

这是真的,这不是梦...

三分钟,从零单排gulp-less

首先是安装Node.js,现在最新的稳定版本是4.4.4,和安装一切传统软件一样,一路“下一步“点下来就行了,安装正确的标志是在控制台中输入(以下示例代码均在cmd控制台输入,linux系统自行添加sudo)

node -v

可以看到正确的版本号三分钟从零单排gulp-less配置_第3张图片

(几天前重装的电脑居然已经落后了一个版本...)

然后安装npm,不好意思,这步不需要,因为npm已经内置在nodejs中了,所以输入

npm -v

就可以直接看到当前npm的版本

三分钟从零单排gulp-less配置_第4张图片

(你知道么,在中文输入法状态输入npm会出现”你配么“,表现出了nodejs高冷的一面...)

突然发现本机的npm版本居然还是2.x,赶紧升级一下,3.x版本的npm目录变得扁平,更加好用,所以我们输入代码

npm i npm -g
其中”i“是”install“的简写,”-g“代表全局安装,第二个”npm“是要安装的包名字,所以npm安装自己的时候这个指令看起来就有点奇怪。

装好后我们再检查一下现在的npm版本号

三分钟从零单排gulp-less配置_第5张图片至此,准备工作全部完成,可以开始配置gulp了。在项目根目录输入代码

npm init

创建一个新的项目

三分钟从零单排gulp-less配置_第6张图片

"这些项目都是什么呢?"

”看得懂的就填,看不懂的就回车...“

现在在项目目录下可以看到一个多出来的package.json文件,我们为项目添加两个必要的依赖

npm i --save-dev gulp gulp-less

“--save”表示把两个引入的包存入package.json文件中,而“--save-dev”表示这两个包是用于开发而不用于产品中。显然gulp只是开发时的辅助工具,所以我们选择带有“-dev”后缀的参数。输入代码,然后安静等待30秒,当代码执行结束之后,你会发现package.json文件变成了

三分钟从零单排gulp-less配置_第7张图片项目已经引入了对gulp和gulp-less的依赖。

现在在根目录下新建一个gulpfile.js文件,用来配置gulp

cd. >gulpfile.js

(你可以直接在文件夹右键新建文件,也可以像我一样用控制台装一下13...)

在gulpfile.js中写入如下代码:

var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('less', function () {
	return gulp.src('./less/*.less')
	.pipe(less())
	.pipe(gulp.dest('./css'));

});

“gulp.task”帮助我们新建一个任务,任务是流式的,从gulp.src的文件开始,到gulp.dest的文件输出,中间用less()做处理。直白的翻一下就是:

执行一个叫做less的task,读入./less文件夹下所有less后缀的文件(*.less表示一切以less为后缀的文件),然后用less()进行转换,然后输出到./css目录下。

我们在根目录下新建一个less文件夹,并且新建一个test.less文件,在其中写一段测试的less代码,然后在控制台执行

gulp less
三分钟从零单排gulp-less配置_第8张图片

看看配置是不是生效了

三分钟从零单排gulp-less配置_第9张图片我们看到,在根目录下的css文件夹内自动生成了对应文件名的css文件。

进阶

每次编写完less文件之后都要手动执行一次“gulp less”指令是不现实的,如何配置自动执行呢?这里要使用"gulp.watch"指令。

可以看到,watch也是gulp自带的(四个)功能之一(其他三个“task”,“src”,“dest”刚刚已经见过了),它可以监控某个路径下文件的改变,而自动执行指定的脚本。

看一下稍微改造过的代码:

var gulp = require('gulp');
var less = require('gulp-less');

var paths = {
	less: ['./less/*.less']
};
gulp.task('less', function () {
	return gulp.src(paths.less)
	.pipe(less())
	.pipe(gulp.dest('./css'));
});

gulp.task('watch', function() {
	gulp.watch(paths.less, ['less']);
});

添加paths变量管理路径(这个并不是必要的,你也可以不使用变量)。

在控制台输入

gulp watch

三分钟从零单排gulp-less配置_第10张图片之后每一次修改less文件,gulp都会自动帮你编译到css文件夹。

当你使用的时候还会遇到一个新问题,就是当输入了错误的less代码点击保存的时候,监控就停止了。

三分钟从零单排gulp-less配置_第11张图片可能只是写了前半个括号,顺手按下保存,结果就整个监听就崩溃了,整个人也崩溃了。

这时候我们再来加一个新的插件:plumber

npm install gulp-plumber --save

修改gulpfile.js文件

var gulp = require('gulp');
var less = require('gulp-less');
var plumber = require('gulp-plumber');

var paths = {
	less: ['./less/*.less']
};
gulp.task('less', function () {
	return gulp.src(paths.less)
	.pipe(plumber())
	.pipe(less())
	.pipe(gulp.dest('./css'));
});

gulp.task('watch', function() {
	gulp.watch(paths.less, ['less']);
});

注意地方要把.pipe(plumber())放在.pipe(less())的前面,才能保证生效。这时候当你再保存错误代码,控制台会抛出错误,然后继续watch监听,不会卡住。

三分钟从零单排gulp-less配置_第12张图片

gulp还有其他很多丰富的插件,更重要的是,它可以极尽个性化的对开发项目进行配置,从而帮助开发者节约时间,而节约时间就是延长生命。


本文转自:https://zhuanlan.zhihu.com/p/20903085

你可能感兴趣的:(各种工具)