看到 Karson 写的 “如何在FastAdmin中使用PHPStorm的File Watchers进行高效开发”，想到也可以用 gulp 来构建，并自动刷新浏览器。

1.监测less文件变化，并自动编译成css文件

2.修改插件文件后实时同步，自动刷新浏览器

3.监测其它文件修改，自动刷新浏览器

附上github地址：fastadmin-addons-gulp3

gulpfile.js 代码

var gulp = require('gulp');var less = require('gulp-less');var sourcemaps = require('gulp-sourcemaps');var connectPhp = require('gulp-connect-php');var runCommand = require('gulp-run-command').default;var watch = require('gulp-watch');var browserSync = require('browser-sync').create();var runSequence = require('run-sequence');// 这里改成你自己的设置var rootDir = 'D:/xampp71/htdocs/demo.fastadmin.net/';var baseDir = rootDir + 'addons/cms/';var hostname = 'demo.fastadmin.net'; // 本地预览的域名, 本地解析dns或者填localhostvar startPath = 'index.php/cms';  // 默认打开的页面var phpExePath = 'D:/xampp71/php/php.exe';var phpIniPath = 'D:/xampp71/php/php.ini';gulp.task('less',function(){  return gulp.src(baseDir + 'assets/less/*.less')          .pipe(sourcemaps.init())          .pipe(less())          .pipe(sourcemaps.write('./'))          .pipe(gulp.dest(baseDir + 'assets/css/'))          .pipe(browserSync.reload({stream:true}))  // 为刷新建立一个管道});// 启用cms插件gulp.task('enable',function() {  runCommand(phpExePath + ' think addon -a cms -c enable --force=true',{cwd:rootDir})});// 监测文件变化, 编译less,js 等addons/cms文件夹内要做的事情gulp.task('watch',function(){  // 仅编译less, 不刷新浏览器, 待less编译完成后, 监测css变化刷新浏览器  w(baseDir + 'assets/less/*.less','less');  // view模板的变化不需要enable, 直接刷新浏览器  w(baseDir + 'view/**/*.*','browser-reload');  // 监测文件变化, 先enable插件, 完成后再刷新浏览器, 同步执行  w_reload(baseDir + 'application/**/*.php','enable');  w_reload(baseDir + 'assets/**/*.*','enable');  w_reload(baseDir + 'public/**/*.*','enable');  // 监测文件变化, 执行单次任务  function w(path,task) {    watch(path,function(){      gulp.start(task);    });  }  // 定义一个函数, 按顺序先enable插件, 再刷新浏览器, 同步执行  function w_reload(path,task) {    watch(path,function(){      runSequence(task,'browser-reload',function(){});    });  }});// 微型服务器, 能够访问phpgulp.task('server',function(){  var options = {    base: rootDir + 'public',       // 访问的根目录    open: false,                     // 自动打开浏览器    bin: phpExePath,  // 本地php.exe路径    ini: phpIniPath,  // 本地php.ini路径    port: 3500,                     // server端口  };  connectPhp.server(options);});/** * 多浏览器同步刷新 * 依赖enable任务的完成 */gulp.task('browser-sync',function(){  var options = {    proxy: '127.0.0.1:3500',  // 或者填    host: hostname,    port: 3600,    watch: true,    startPath: startPath,    open: 'external',  };  browserSync.init(options);});// 刷新浏览器任务gulp.task('browser-reload',function(){  browserSync.reload();});// 默认任务gulp.task('default',function(cb){  runSequence(    ['less'],    ['enable'],    ['server','browser-sync','watch'],    cb  );});

构建步骤

安装 nodejs 和 全局安装 gulp-cli

下载 nodejs 并安装

https://nodejs.org/en/

全局安装 gulp-cli

npm install gulp-cli -g

克隆

fastadmin 根目录新建文件夹，比如 gulpdir，进入文件夹

git clone https://github.com/litemelon/fastadmin-addons-gulp3.git

安装依赖

npm install

修改设定

修改 gulpfile.js 里头部变量

// 这里改成你自己的设置var rootDir = 'D:/xampp71/htdocs/demo.fastadmin.net/';var baseDir = rootDir + 'addons/cms/';var hostname = 'demo.fastadmin.net'; // 本地预览的域名, 本地解析dns或者填localhostvar startPath = 'index.php/cms';  // 默认打开的页面var phpExePath = 'D:/xampp71/php/php.exe';var phpIniPath = 'D:/xampp71/php/php.ini';

运行

gulp

希望以上内容对你有所帮助！如果还有其他问题，请随时提问。 各类知识收集 拥有多年CMS企业建站经验，对 iCMS， Fastadmin， ClassCMS， LeCMS， PbootCMS， PHPCMS， 易优CMS， YzmCMS， 讯睿CMS， 极致CMS， Wordpress， HkCMS， YznCMS， WellCMS， ThinkCMF， 等各类cms的相互转化，程序开发，网站制作，bug修复，程序杀毒，插件定制都可以提供最佳解决方案。