什么是gulp
gulp是自动化构建工具,构建工具可以使繁琐的工作简单化,提高开发人员的工作效率,对于前端开发开发人员来说,我们通常用gulp来合并文件,压缩文件,编译less和sass文件等。
安装gulp
gulp 是基于 node 实现的,那么我们就需要先安装 node。
打开 https://nodejs.org/ 点击绿色的 INSTALL 按钮下载安装 node。
npm 是 node 的包管理工具,可以利用它安装 gulp 所需的包。(在安装 node 时已经自动安装了 npm)
在命令行输入
若一直没安装成功,请使用 cnpm 安装(npm的国内加速镜像)
意思是:使用 npm 安装全局性的(-g) gulp 包。
如果你安装失败,请输入sudo npm install -g gulp使用管理员权限安装。(可能会要求输入密码)
安装时请注意命令行的提示信息,安装完成后可在命令行输入 gulp -v 以确认安装成功。
如何使用gulp编译less
你可以 下载所有示例代码 - 或在线查看代码
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
| // 获取 gulp var gulp = require('gulp') // 获取 gulp-less 模块 var less = require('gulp-less')
// 编译less // 在命令行输入 gulp images 启动此任务 gulp.task('less', function () { // 1. 找到 less 文件 gulp.src('less/**.less') // 2. 编译为css .pipe(less()) // 3. 另存文件 .pipe(gulp.dest('dist/css')) });
// 在命令行使用 gulp auto 启动此任务 gulp.task('auto', function () { // 监听文件修改,当文件被修改则执行 images 任务 gulp.watch('less/**.less', ['less']) })
// 使用 gulp.task('default') 定义默认任务 // 在命令行使用 gulp 启动 less 任务和 auto 任务 gulp.task('default', ['less', 'auto'])
|
你可以访问 gulp-less 以查看更多用法。
参考资料
gulp入门指南