node.js使用gulp编译less

1. 安装gulp

node.js命令窗口输入sudo npm install -g gulp全局安装gulp

2. 配置环境变量

1. 新建环境变量:我的电脑属性-高级系统设置-环境变量-新建administrator的用户变量
2. 变量名字为:NODE_PATH
3. 变量值为:C:\Users\Administrator\AppData\Roaming\npm\node_modules

3. 创建gulpfile.js文件

新建文件名为gulpfile.js的js文件,键入以下代码保存。src路径按需修改
第1行代码:加载gulp工具
第2行代码:加载less插件
3-7行代码:编译less
8-10行代码:监听文件变化

1. var gulp = require('gulp');  
2. var less = require('gulp-less');
3. gulp.task('less', function() {
4.     return gulp.src('./www/css/*.less')
5.     .pipe(less())
6.     .pipe(gulp.dest('./www/css'))
7. });
8. gulp.task('watch', function () {
9.   gulp.watch(['./www/*.html','./www/css/*.less'], ['less']);
10. });

4. 文件目录处理

项目根目录放入gulpfile.js文件-根目录新建www文件夹-www文件夹放入index.html文件以及css目录-css文件夹创建style.css及style.less。

5. 开始编译less

1. node.js命令窗口输入cd+空格+文件目录,本次示例为:
cd C:\Users\Administrator\Desktop\less
2. 输入gulp less开始编译
3. 输入gulp watch监听

6. 完成编译

html文件
less文件
css文件
预览效果
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容