Homestead Nginx提供通过gulpfile和Vinyl-fs

时间:2018-07-17 17:47:47

标签: symfony nginx gulp symlink

对于我的symfony项目,我使用以下gulpfile.js管理前端资产:

var gulp = require('gulp');
var rename = require('gulp-rename');
var vfs = require('vinyl-fs');

/**
* Location where to store the 3rd party libraries
*/
var frontend_folder="./frontend"
var vendor_folder=`${frontend_folder}/vendor`
var frontent_dev_folder_js=`${frontend_folder}/js`
var frontent_dev_folder_js=`${frontend_folder}/css`

/*################################### Installing Dependencies ###############################*/

//Move Bootstrap
gulp.task('move_bootstrap',function(done){

  var bootstrap_dir='./node_modules/bootstrap/dist';
  var dest=`${vendor_folder}/bootstrap`;

  var css_files=[`${bootstrap_dir}/css/bootstrap.min.css`,`${bootstrap_dir}/css/bootstrap.min.css.map`];
  var js_files=[`${bootstrap_dir}/js/bootstrap.bundle.min.js`,`${bootstrap_dir}/js/bootstrap.bundle.min.js.map`];

  gulp.src(css_files).pipe(gulp.dest(`${dest}/css`));
  gulp.src(js_files).pipe(gulp.dest(`${dest}/js`));

  done();
})

//Jquery & miscellanous Javascript move
gulp.task('move_jquery',function(done){
  var jqueryFiles=['./node_modules/jquery/dist/jquery.min.js'];
  gulp.src(jqueryFiles).pipe(gulp.dest(vendor_folder));

  done();
});

//For fontawesome
gulp.task('move_fontawesome',function(done){
  var path='./node_modules/font-awesome';
  var dest=vendor_folder+'/font-awesome';

  gulp.src(path+'/fonts/*').pipe(gulp.dest(dest+'/fonts'));
  gulp.src(path+'/css/font-awesome.min.css').pipe(gulp.dest(dest+'/css'));
  done();
});


/******* Build Final Steps ****************************************************/

gulp.task('link_assets',function(done){

  vfs.src(frontend_folder+'/*', {followSymlinks: false})
        .pipe(vfs.symlink('./web/assets/'));

  return done();
});

/* ############################################ Installing Dependencies ##################################### */

gulp.task('move_frontend', gulp.series(['move_bootstrap','move_jquery','move_fontawesome'],(done)=>{done()}));
gulp.task('dev',gulp.series(['move_frontend','link_assets'],(done)=>{done();}));

gulp.task('default',gulp.series(['dev'],(done)=>{done()}));

有一个任务会生成文件夹中存在的所有内容的符号链接,该文件夹位于我的项目根目录中名为frontend的文件夹中,并进入./web/assets的文件夹中。换句话说,我的项目根目录是:

-
-- frontend
...
-- web
---assets
---- ^any folder located in frontedn symlinked here^

此外,我在config.yml中放置了资产的以下配置:

framework:
...
    assets:
        packages:
            vendor:
                base_path: '/assets/vendor'

并且我现在尝试使我的nginx服务于符号链接的内容(用于开发目的),现在我尝试放置以下设置(基于nginx documentation):

location ~ \/web\/assets {
    disable_symlinks off;
    root /home/vagrant/code/web/assets;
}

但是当我访问http://192.168.10.10/assets/vendor/bootstrap/css/bootstrap.min.css这样的资产时,出现错误404。为进行开发,我使用了宅基地流浪者图像,并在流浪者外部运行了gulp任务。

1 个答案:

答案 0 :(得分:0)

  

对于开发,我使用宅基地流浪者图像,并在流浪者外部运行gulp任务。

那是问题! 正在使用完整路径映射无业游民的符号链接外部,换句话说,您的符号链接指向一个不存在的文件夹,因此nginx在跟随符号链接时会访问一个不存在的文件,并且按预期不起作用内容。

所以我建议通过ssh访问正在运行的虚拟机:

vagrant ssh

然后转到文件夹~/code

cd ~/code

删除符号链接

rm -rf ./web/assets/*

然后重新运行gulp任务

gulp

这将解决您可能遇到的任何问题。