gulp自動化構建工具--自動編譯less為css--學習筆記

 

1.安裝

      命令：npm install gulp-less 或者 cnpm install gulp-less

2.編寫文件

 //獲取gulp
var gulp = require('gulp')

//獲取gulp-less模塊
var less = require("gulp-less")

//編譯less
//在命令行輸入gulp less啟動此任務
gulp.task('less',function(){
    //1.找到less文件
    gulp.src('views/less/**.less')
    //2.編譯為css
    .pipe(less())
    //3.另存為css
    .pipe(gulp.dest('views/dist1/css1'))
})

//在命令行gulp auto啟動此任務
gulp.task('auto',function(){
    //監聽文件修改，當文件修改則執行less任務
    gulp.watch('views/less/**.less',['less'])
})
//使用gulp.task('default')定義默認任務
//在命令行使用gulp啟動images任務和auto任務
gulp.task('default',['less','auto'])

3.執行

      gulp

 

 

ps：如直接復制gulpfile.js文件，需更改項目地址