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

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后保存会保存修改
});

@ 创建本地的一个SERVER
gulp.task('webserver', function () {
connect.server({
root: ['project'], // 开启server的目录
livereload: true, // 即时刷新，当html、css、js变化后刷新页面
port: 8081 // 监控本机的端口号
});
});

@默认任务
gulp.task('default', ['webserver', 'lessWatch']);