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

最新推荐文章于 2021-06-30 01:24:52 发布

原创最新推荐文章于 2021-06-30 01:24:52 发布 · 487 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#less #插件 #cmd #编辑器

本文介绍了如何使用GULP编译LESS，并搭建本地开发环境。步骤包括创建支持文件夹、生成package.json、安装GULP和相关插件、编写gulpfile.js，以及配置静态资源目录。通过PHPStorm或WEBStorm运行gulp任务，并在浏览器中查看本地服务器运行效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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']);