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源碼發來大家看看找出原因。