गुलप-वेबपैप ब्राउज़रस्काक और PHP

Question

चला रहा है मेरा मुख्य लक्ष्य योरमन के gulp-webapp विकास वर्कफ़्लो को PHP चलाने के लिए अनुकूलित करना है।

विशेष रूप से, मैं, (सास से संकलित सीएसएस के लिए) एकाधिक आधार निर्देशिका और मार्गों (बोवर निर्भरता के लिए) के साथ gulp-php-connect उपयोग करने में सक्षम होना चाहता हूँ कि अगर भी संभव है।

मैं gulp-connect-php प्लगइन का उपयोग कर Gulp साथ पीएचपी चलाने के लिए सक्षम हूँ, इस तरह:

gulp.task('connect-php', function() { 
    connectPHP.server({ 
    hostname: '0.0.0.0', 
    bin: '/Applications/MAMP/bin/php/php5.5.3/bin/php', 
    ini: '/Applications/MAMP/bin/php/php5.5.3/conf/php.ini', 
    port: 8000, 
    base: 'dev' 
    }); 
}); 

हालांकि, मैं घूंट-वेब ऐप्लिकेशन की उत्कृष्ट लेकिन काफी उलझ विकास कार्यप्रवाह वास्तुकला, का लाभ लेने के लिए करना चाहते हैं जो ब्राउज़रसिंक पर निर्भर करता है, एसएएस कंपाइलर (एक .css फ़ाइल में एक .tmp फ़ोल्डर में संकलन के लिए संकलित करता है), ऑटो-प्रीफिक्सर, और अन्य उपयोगी प्लगइन का एक समूह का उपयोग करता है।

gulp.task('serve', ['styles'],function() { 
    browserSync({ 
    notify: false, 
    port: 9000, 
    server: { 
     baseDir: ['.tmp', 'app'], 
     routes: { 
     '/bower_components': 'bower_components' 
     } 
    } 
    }); 

    // watch for changes 
    gulp.watch([ 
    'app/*.html', 
    '.tmp/styles/**/*.css', 
    'app/scripts/**/*.js', 
    'app/images/**/*' 
    ]).on('change', reload); 

    gulp.watch('app/styles/**/*.scss', ['styles', reload]); 
    gulp.watch('bower.json', ['wiredep', 'fonts', reload]); 
}); 

BrowserSync एक प्रॉक्सी का विकल्प है, मुझे gulp-connect-php सर्वर है, जो बहुत अद्भुत है के साथ इसे चलाने के लिए अनुमति देता है:

यहाँ इसका हिस्सा है कि मैं gulp-connect-php या किसी अन्य पीएचपी उपयोग करने के लिए अनुकूल करने के लिए चाहते हैं है । लेकिन BrowserSync जैसे कई बेस निर्देशिकाओं और मार्गों का उपयोग करने के लिए मुझे gulp-connect-php की आवश्यकता है।

अब तक मैं इस के साथ आ गया है:

gulp.task('serve-php', ['styles','connect-php'],function() { 
    browserSync({ 
    proxy: "localhost:8000" 
    }); 

    // watch for changes 
    gulp.watch([ 
    'app/*.php', 
    'app/styles/**/*.css', 
    'app/scripts/**/*.js', 
    'app/images/**/*' 
    ]).on('change', reload); 

    gulp.watch('app/styles/**/*.scss', ['styles, reload]); 
    gulp.watch('bower.json', ['wiredep', 'fonts', reload]); 
}); 

अस्थायी रूप से एकाधिक आधार निर्देशिका इस मुद्दे को ठीक करने के लिए, मैं styles कार्य बदलाव तो यह /app बजाय .tmp/ को संकलित .css संग्रहीत करता है। मैं इसे एक अस्थायी फ़ोल्डर पर रखना पसंद करूंगा, क्योंकि मुझे उस एसएस फाइलों के साथ लटकते हुए संकलित .css फ़ाइल की आवश्यकता नहीं है।

मार्गों मुद्दे के लिए, मैं wiredep प्लगइन बताने के लिए कोई सफलता के साथ bower_components/jquery/dist/jquery.js से ../bower_components/jquery/dist/jquery.js करने के लिए एक रास्ता बदलने के लिए, मान लीजिए, कोशिश कर रहा हूँ।

मैं बस मैन्युअल रूप से index.php में पथों का नाम बदल सकता था, और यह अभी भी काम नहीं करता है। जब gulp serve चल रहा मिलती है:

/bower_components/jquery/dist/modernizr.js - No such file or directory

... भले ही मैं ../bower_components/jquery/dist/jquery.js को index.html में पथ बदल दिया है।

मेरा मानना ​​है कि यह काम नहीं करता है क्योंकि gulp-connect-php सर्वर बेस फ़ोल्डर के बाहर क्या नहीं देख सकता है।

मैं अलग-अलग चीजों की कोशिश कर रहा हूं, और हालांकि मैं इस धागे के शीर्षक पर बहुत अस्पष्ट रहा हूं, मुझे लगता है कि सबसे साफ समाधान gulp-connect-php के साथ कई आधार निर्देशिकाओं और मार्गों को चलाने के लिए होगा, लेकिन मुझे नहीं पता कि क्या यह है मुमकिन।

Answer 1

एफडब्ल्यूआईडब्लू, मुझे ऐप/फ़ोल्डर में संकलित। सीएसएस फ़ाइल को संकलित .css फ़ाइल रखकर और ऐप/फ़ोल्डर के अंदर चलने/bower_dependencies फ़ोल्डर को रखकर काफी सरल और निष्पक्ष समाधान मिला है।

सास के लिए, मैं केवल <!-- build:css styles/main.css --> लिए प्लेसहोल्डर में पथ बदल सकते हैं और styles कार्य में dest बदलने की जरूरत है।

bower_components के लिए, मैं सिर्फ .bowerrc में bower_components संपादित:

{ 
    "directory": "app/bower_components" 
} 

और gulpfile.js में wiredep धारा को यह कहा:

fileTypes: { 
    scss: { 
     replace: { 
     scss: '@import "app/{{filePath}}";' 
     } 
    } 
    }, 

Answer 2

मैं थोड़ी देर के खर्च इस काम करने की कोशिश एक बाहर, लेकिन अब एक कामकाजी समाधान है। जिस तरह से मैं हल किया जाता है सर्वर के रूप में BrowserSync का इस्तेमाल किया गया है, और एक मिडलवेयर कि अनुरोध प्रॉक्सी अगर वे एक पैटर्न से मेल नहीं खाते ...

http-प्रॉक्सी पैकेज को स्थापित करें ... जोड़ा

$ npm install --save-dev http-proxy 

gulpfile.js के शीर्ष करने के लिए प्रॉक्सी पैकेज जोड़ें ...

var httpProxy = require('http-proxy'); 

एक अलग php सर्वर और BrowserSync से पहले एक प्रॉक्सी सर्वर जोड़ें ...

gulp.task('php-serve', ['styles', 'fonts'], function() { 
    connect.server({ 
     port: 9001, 
     base: 'app', 
     open: false 
    }); 

    var proxy = httpProxy.createProxyServer({}); 

    // ... 

तो देखने के लिए सर्वर के लिए मिडलवेयर जोड़ने अनुरोध प्रॉक्सी किया करने की जरूरत है ...

 // ... 

     server: { 
      baseDir : ['.tmp', 'app'], 
      routes : { 
       '/bower_components': 'bower_components' 
      }, 

      // THIS IS THE ADDED MIDDLEWARE 
      middleware: function (req, res, next) { 
       var url = req.url; 

       if (!url.match(/^\/(styles|fonts|bower_components)\//)) { 
        proxy.web(req, res, { target: 'http://127.0.0.1:9001' }); 
       } else { 
        next(); 
       } 
      } 
     } 

     // ... 

और यहाँ संपूर्णता के लिए पूर्ण कार्य है ...

gulp.task('php-serve', ['styles', 'fonts'], function() { 
    connect.server({ 
     port: 9001, 
     base: 'app', 
     open: false 
    }); 

    var proxy = httpProxy.createProxyServer({}); 

    browserSync({ 
     notify: false, 
     port : 9000, 
     server: { 
      baseDir : ['.tmp', 'app'], 
      routes : { 
       '/bower_components': 'bower_components' 
      }, 
      middleware: function (req, res, next) { 
       var url = req.url; 

       if (!url.match(/^\/(styles|fonts|bower_components)\//)) { 
        proxy.web(req, res, { target: 'http://127.0.0.1:9001' }); 
       } else { 
        next(); 
       } 
      } 
     } 
    }); 

    // watch for changes 
    gulp.watch([ 
     'app/*.html', 
     'app/*.php', 
     'app/scripts/**/*.js', 
     'app/images/**/*', 
     '.tmp/fonts/**/*' 
    ]).on('change', reload); 

    gulp.watch('app/styles/**/*.scss', ['styles']); 
    gulp.watch('app/fonts/**/*', ['fonts']); 
    gulp.watch('bower.json', ['wiredep', 'fonts']); 
}); 

आशा इस बचाता है हर बार मैंने इसे काम करने में बिताया! : ओ)