nodejs gulp less编辑

nodejs 下载地址:http://pan.baidu.com/s/1bnz2oPp 提取密码：0mip

1、最简单的编译less

　　在安装好nodejs后，cmd 进入控制台安装 lessc ： npm install lessc -g

　　在每次修改less文件后，需要手动的去执行命令编译less文件： E:\zmapp\webRoot\html\static\css> lessc index.less>index.css 回车，就可以看到less文件已经编译，刷新页面即可。

2、用gulp 监听 less文件去编译less

　　在安装nodejs后，cmd 进入控制台需要安装一下几个插件

　　1> 安装gulp， npm install gulp --save-dev 安装在对应的目录中，如：E:\zmapp\webRoot\html\static\ npm install gulp --save-dev

　　2>安装好gulp后再安装gulp-lessc，npm install gulp-lessc --save-dev 安装在对应的目录中，如：E:\zmapp\webRoot\html\static\ npm install gulp-lessc --save-dev

　　3> 安装好gulp-lessc后再安装 gulp-livereload,npm install gulp-livereload --save-dev 安装在对应的目录中，如：E:\zmapp\webRoot\html\static\ npm install gulp-livereload --save-dev

　　4> 安装好gulp-livereload后再安装 gulp-watch ,npm install gulp-watch --save-dev 安装在对应的目录中，如：E:\zmapp\webRoot\html\static\ npm install gulp-watch --save-dev

　　5> 如果需要对css文件进行压缩，需要安装gulp-minify-css, npm install gulp-minify-css --save-dev 安装在对应的目录中，如：E:\zmapp\webRoot\html\static\ npm install gulp-minify-css --save-dev

　　前面四个步骤都是可以安装到全局中的，安装命令为：C:\>npm install -g gulp-watch 、C:\>npm install -g gulp-less等等，但是第五步需要安装在指定的文件夹中。

　　在安装好上面的插件后，需要在相应的文件目录下面建一个gulpFile.js文件。文件代码如下：

var gulp = require('gulp'),less = require('gulp-less'),livereload = require('gulp-livereload'),　　//cssmin = require("gulp-minify-css"),watch = require("gulp-watch");

//压缩css文件需要的配置

//gulp.task("cssminify", function () {
//return gulp.src("index.css")
//.pipe(cssmin())
//.pipe(gulp.dest("")).pipe(livereload());
//});

gulp.task("lessc", function () {gulp.src("css/index.less").pipe(less()).pipe(gulp.dest("css/")).pipe(livereload());
});
gulp.task("watch", function (file) {livereload.listen();livereload.changed(file.path);gulp.watch('css/index.less', ['lessc']);　　//gulp.watch('*.css', ['cssminify']);//压缩
});gulp.task('default', ['watch'], function () {gulp.start('lessc');未压缩的文件 css　　//gulp.start('lessc', 'cssminify');//压缩后的文件 css
});

　　上面中的 index.less可以换成*.less，换成*.less后，是检查文件里面的所有的less文件。

　　在上面的所有步骤都准备好后，就可以进行我们的less文件监控。

　　cmd 进入到相应的目录中：

　　　　E:\zmapp\webRoot\html\static\

　　　　在去执行 gulp 回车后就会看到如下图提示：

　　那么我们这样就可以进行我们的less编译的过程了。

　　第一次写这样的东西，写得不好，请见谅。谢谢

转载于:https://www.cnblogs.com/LLJ748211490/p/4672691.html

nodejs gulp less编辑相关推荐

前端工程筹建NodeJs+gulp+bower
前端工程筹建NodeJs+gulp+bower 1.安装nodejs nodejs 官网下载安装文件安装完成之后,在命令窗口执行,(显示nodejs版本) 和(显示npm版本)可以使用这两个命令查看 ...
《nodejs+gulp+webpack基础实战篇》课程笔记（四）-- 实战演练
一.用gulp 构建前端页面(1)---静态构建 npm install gulp-template --save-dev 通过这个插件,我们可以像写后台模板(譬如PHP)一样写前端页面.我们首先学习 ...
《nodejs+gulp+webpack基础实战篇》课程笔记（六）--附加课
一.多页面分离资源引用,按需引用JS和css 我们前面实现了以下功能:1.新建了一个login模版(用到htmlWebpackPlugin).2.分别把main.js和login.js.reg.js分 ...
nodejs+gulp内网前端项目代码打包解决手动清空浏览器缓存问题（一）
nodejs+gulp内网前端项目代码打包解决手动清空浏览器缓存问题项目介绍打包工具选择环境搭建使用gulp 项目介绍项目前端框架是jquery+miniUI框架,它存在不少问题,但是我们的 ...
前端开发使用工具 gulp
点击上方毛利学python,选择置顶或星标第一时间送达Python 技术干货! gulp gulp是基于流的前端构件化工具.gulp是自动化项目的构建利器:不仅能对网站资源进行优化,而且在开发过程 ...
gulp代码压缩和制作雪碧图
安装nodejs gulp是基于nodejs,需要安装nodejs 在 [ nodejs官网 ]下载并安装nodejs 查看nodejs版本安装完nodejs后,在命令行中(window + r 输 ...
Admui源码+ Admui框架开发文档
QQ194633530 索取源码概述 Admui是一款管理系统快速开发框架,采用 spring boot 2.0.4.spring5.0.8.SpringMvc.mybatis.shiro.swa ...
Admui 源码、Admui通用框架、Admui 开发文档、admui框架使用经验
QQ194633530 索取源码基本概述 Admui 的追求的目标是做到开箱即用,无需了解框架内部机制,但是我们也深知一套框架不可能满足所有客户的所有需求,所以我们仍然为您准备了前端的开发文档,以 ...
node / npm 配置问题
安装nodejs 后运行 npm 命令无响应处理方法安装和卸载过nodejs, 也编辑过 C:\Users\{账户}\下的.npmrc文件. 再全新安装nodejs ,运行npm 命令,无响应. 处 ...
Node+GitLab实现小程序CI系统
为什么要实现自动部署小程序开发迭代里,有以下几个个头痛的问题, 如何准确并快速的的把小程序上传去后台,并让测试人员进行测试? 测试同事找开发要二维码,效率较低本地生成的二维码会出现携带本地代码.未 ...

nodejs gulp less编辑

nodejs gulp less编辑相关推荐

最新文章

热门文章