gulpless编译配置
① webstorm | 编译 Less 保存自动生成 wxss/acss/css
因为感觉用 微信开发者工具 开发很不习惯，所以都是用 WebStorm 来开发，再用 微信开发者工具 预览。本文主要记录一下利用webstorm编译less
配置方案
1、配置在当前目录生成.wxss
2、less独立文件夹，生成 .wxss 文件到指定的目录中
1、配置在当前目录生成.wxss
2、less独立文件夹，生成 .wxss 文件到指定的目录中
和微信步骤一样，只是后缀不同
路径 File | Settings | Tools | File Watchers | +
点加号，选择less, 弹出下面的窗口，已经有默认配置了，点ok即可
② webpack编译less
webpack loaders
webpack 编译 less 需要使用到的 loader :
* less-loader
将 less 文件编译成 CSS ；
1.创建本地项目 webpack-demo
2.在 webpack-demo 的根目录下创建 package.json 文件
模块说明：
4.修改 package.json 文件的 scripts 属性值,进行打包资源的配置
5.安装需要的loader和依赖
6.创建一个名为 test.less 的文件
并将该文件引入 webpack 的入口文件 entry.js 中；
7.配置编译 less 的 loader
7.运行编译命令
③ webstorm 配置less编译file watcher，program这个该怎么填
1、 打开Nodejs官ejs.org/，点“DOWNLOADS”,点64-bit下载“node-v0.10.33-x64.msi”。
2、 下载好后，双击“node-v0.10.33-x64.msi”，按照默认选项安装Nodejs，默认安装路径为：C:\Program Files\nodejs。
3、 “开始”-->cmd,打开cmd程序，输入“node -v”,出现” v0.10.33”; 输入“npm -v”,出现” 1.4.28”,说明Nodejs和郑困npm都已安装成功。
4、“开始”-->cmd,打开cmd程序，输入“cd C:\Program Files\nodejs”,进入nodejs安装目录。输入npm install less -g 回车，安装less组件。稍等片刻，完成后，你会发现C:\Users\wind\渗银AppData\Roaming\npm\node_moles 目录下有less组件。
至此Windows7 x64系统下安装Nodejs及配置less组件已基本完成，接下来我们配置WebStorm 9.0.1，使其能将less文件编译成css文件。
5、开启JetBrains WebStorm 9.0.1程序，打开“SuperDesigns”项目，该项目中含有“default.less”文件。
6、File-->Settings,打开设置选项。找到“External Tools”扩展工具设置项，点开右侧的“+”，在Name栏输入喊喊念“LESS”，“Tool settings”分别输入如下：
Program: C:\Program Files\nodejs\ n
④ less文件编译css，css文件为什么是空的呢
有些软件有插件可以实时编译，比如sublime。
我用的是gulp，方便前端自动化。你可以网上搜一下，用起来啊很方便。
举个例子：
java">vargulp=require('gulp');
varless=require('gulp-less');
varnotify=require('gulp-notify');
varplumber=require('gulp-plumber');
varconcat=require('gulp-concat');
varminifycss=require('gulp-minify-css');
varrename=require('gulp-rename');
varwatch=require('gulp-watch');
varuglify=require('gulp-uglify');
varautoprefixer=require('gulp-autoprefixer');
varlessPath='./src/less/*.less';
varlessMainPath='./src/less/main.less';
varlessDist='./src/css/';
varcssPath='./src/css/*.css';
varjsSrcPath='./src/js/*.js';
vardistPath='./dist/';
//编译less
gulp.task('lessCompile',function(){
gulp.src([lessMainPath])
.pipe(plumber({errorHandler:notify.onError('Error:<%=error.message%>')}))
.pipe(less())
.pipe(gulp.dest(lessDist));
});
//监控less文件变化
gulp.task('watchLess',function(){
gulp.watch(lessPath,['lessCompile']);
});
//css合并压缩加前缀
gulp.task('handleCss',function(){
returngulp.src(cssPath)
.pipe(plumber({errorHandler:notify.onError('Error:<%=error.message%>')}))
.pipe(concat('app.css'))
.pipe(autoprefixer({
browsers:['last5versions','Android>=4.0'],
cascade:true,
remove:false
}))
.pipe(gulp.dest(distPath))
.pipe(minifycss())
.pipe(rename('app.min.css'))
.pipe(gulp.dest(distPath));
});
//监控css文件变化
gulp.task('watchCss',function(){
gulp.watch(cssPath,['handleCss']);
});
⑤ 为什么 gulp testWatch 命令编译出来的less
gulpfile.js配置如下：
//导入工具包 require('node_moles里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
less = require('gulp-less');
//定义一个testLess任务（自定义任务名称）
gulp.task('testLess', function () {
gulp.src('src/less/*.less') //该任务针对的文件
.pipe(less()) //该任务调用的模块
.pipe(gulp.dest('src/css')); //将会在src/css下生成index.css
});
gulp.task('default',['testLess']); //定义默认任务
//监听预编译文件
gulp.task('testWatch',function(){
gulp.watch('src/**/*.less',['testLess']);
});
gulp testWatch 命令编译出来的less文件 怎么效率没有直接运行的less文件要快啊，编辑完less文件内容。css里不能直接反映出来，要关掉css重新打开才有。
⑥ 用gulp让less实时转生成的css怎样引入html文件不生效
可能存在的原因：
css的引用路径是否准确（浏览器打开HTML文件，然后右键查看源码，点下引入的css，看看能不能打开），能则下一步。
less编译的css存放路径是否准确。生成之后，看下前后两次生成的css文件是否有变化。有则往下分析；
要想效果实时生效，需要浏览器能自动刷新或者自动加载，这是必要，不然即使less能自动化编译，但如果浏览器不能自动刷新或者自动加载，那效果也是不能实时改变的。目前能实现浏览器页面自动刷新的gulp插件有：gulp-connect，不知道你用进去了没，没用的可以试试？
gulp-connect 配置问题或者浏览器livereload插件没有工作。如果确定配置没问题，可以在命令行窗口按Ctrl+C停掉gulp任务，然后重新运行gulp任务就好。
ps:还不行的话，建议把gulpfile.js源码发来大家看看找出原因。