GULP 编译less以及搭建本地开发环境

STEPS：

• 1、在自己开发环境目录下新建一个文件夹如，如打开cmd，新建一个support的文件夹
• 2、进入文件夹
• 3、使用 NPM 生成 package.json 文件
• 4、全局安装gulp
• 5、本地安装相关插件
• 6、新建gulpfile.js文件
• 7、创建一个存放静态资源的文件夹，如：project
• 8、在project文件夹下创建静态资源的存放目录和页面html，如dist用来存放.less的文件
• 9、使用PHPStorm或者WEBStorm右键gulpfile.js,点击‘run ‘default’ ‘
• 10、浏览器打开 http://localhost:8081 ，端口号可以自己配置
  

D:\workspace\C>mkdir Support
D:\workspace\C>cd Support
D:\workspace\C\Support>npm install -g gulp
D:\workspace\C\Support>npm install –save-dev gulp-connect gulp-rename -gulp-less gulp-minify-css

D:\workspace\C\Support>mkdir project
D:\workspace\C\Support>cd project
D:\workspace\C\Support\project>mkdir dist css js img

插件相关解释

插件名称 作用 gulp-connect 搭建本地的webServer gulp-rename 重命名文件名称 gulp-less 解析LESS文件 gulp-minify-css 压缩CSS文件

gulpfile.js相关配置

var gulp = require('gulp'),    connect = require('gulp-connect'),    rename = require("gulp-rename"),    less = require("gulp-less"),    minifyCSS = require('gulp-minify-css');@编译LESS文件gulp.task('less_common', function () {    gulp.src('./project/dist/base.less') // 编译dist下的base.less        .pipe(less()) // 处理LESS        .pipe(minifyCSS()) // 压缩CSS        .pipe(rename({ // 对文件重命名            basename: "common.min",            extname: ".css"        }))        .pipe(gulp.dest('./project/css/')        );});@ watch LESS文件的变化gulp.task('lessWatch', function () {    gulp.watch('./application/dist/bse.less', ['less_common']); // 监控base.less的变化，当文件change后保存会保存修改});@ 创建本地的一个SERVERgulp.task('webserver', function () {    connect.server({        root: ['project'], // 开启server的目录        livereload: true, // 即时刷新，当html、css、js变化后刷新页面        port: 8081 // 监控本机的端口号    });});@默认任务gulp.task('default', ['webserver', 'lessWatch']);