😇 🛀🏿 🎊 Silexスケルトン+ Gulp + LiveReload 👂🏽 👨‍🚒 👩🏻‍🎤

エントリー
すべての人に良い一日を！おそらく誰もが素晴らしいSilexフレームワークのことを聞いており、私も含めて、すでに恋に落ちた人もいます。マイクロフレームの主なハイライトは、そのシンプルさです。ダウンロードして構成し、動作するようになりました。そして、繰り返しアクションをなくし、それによって時間を節約するために、「一度か二度」いくつかのコマンドで起動される何らかの種類のワークピースを用意することは非常に良いでしょう。さらに、NodeJSのGulpとBowerを乗せておくといいでしょう。考え-完了。私がしたことを誰が見たいか、あなたは猫の下で歓迎されています…

どうやって？ GulpとBowerにまだ慣れていませんか？ それから私たちはあなたに行きます！
Gulpはタスクマネージャーです。 jsの縮小やcssやCoffeeScriptのプリプロセッサの起動など、プロジェクトの開発中に実行する必要のあるアクションを自動化する必要がありますが、これはその多くのスキルのほんの一部です。本当にgulpには膨大な数のプラグインがあります。 Gulpの詳細については、この記事を参照してください。

Bowerは、Webライブラリのパッケージマネージャーです。その助けにより、Bootstrap、jQueryのようなjsライブラリ、AngularJSのようなjsフレームワークなどを簡単にインストールできます。 BowerのPHP composerパッケージマネージャーと同様に、bower.json設定ファイルがあります。インストール方法とその詳細については、この記事を参照してください。

SilexプロジェクトでのGulpとBowerの使用は何ですか？
Silexと一般的なPHPでは、Gulpのようなものは原則的にはありません。このため、メリットは明らかです。 Gulpを使用すると、さまざまなコンパイラを手動で実行する必要がなくなり、開発プロセスなどを高速化できます。

次に、設定とインストールの説明、ただし今のところ）

設定ファイル
アセンブリのgulpfile.jsファイルは次のようになります。

ネタバレgulpfile.js

'use strict'; var gulp = require('gulp'), livereload = require('gulp-livereload'), sass = require('gulp-sass'), concat = require('gulp-concat'), csso = require('gulp-csso'), bc = './bower_components/', web = './web/', vendor = web+'vendor/', //    build = web+'build/', //     src = web+'src/'; //      gulp.task('js', function() { gulp.src(src+'**/*.js') .pipe(concat('app.js')) .pipe(gulp.dest(build+'js/')) }); gulp.task('sass', function () { gulp.src(src+'**/*.scss') .pipe(sass()) .pipe(concat('style.min.css')) .pipe(csso()) .pipe(gulp.dest(build+'css/')); }); gulp.task('libs', function() { gulp.src(bc+'jquery/dist/jquery.js') .pipe(gulp.dest(vendor+'libs/js/')); gulp.src(bc+'bootstrap/dist/**/*.*') .pipe(gulp.dest(vendor+'libs/bootstrap/')); }); gulp.task('watch', function() { livereload.listen({start: true}); gulp.watch('app/Resources/**').on('change', livereload.changed); gulp.watch('app/config/**').on('change', livereload.changed); gulp.watch('src/**').on('change', livereload.changed); gulp.watch('web/src/**').on('change', livereload.changed); gulp.watch(src+'**/*.js', ['js']); gulp.watch(src+'**/*.scss', ['sass']); gulp.watch(bc+'**/*.js', ['js']); gulp.watch(bc+'**/*.scss', ['sass']); }); gulp.task('default', [ 'libs', 'js', 'sass', 'watch' ]);

ご覧のとおり、ここではすべてが非常に単純であり、何かが必要ない場合や不足しているものがある場合は、ニーズに合わせてファイルを簡単に書き換えることができます。
'gulp-livereload'-ライブモードでの開発に必要です。ライブ開発モードの外観とその内容については、 Soraxのビデオで見ることができます。私の作品では、彼のビデオのようにノードJを切り刻むのではなく、NodeJを使用していますが、一般にすべてがうまく機能し、なぜこれが必要なのか理解できます。
' gulp - sass'-その場でscssをコンパイルするために必要です。
'gulp-concat'-名前が示すように、ファイルを1つにマージするために必要です。

Bower.jsonファイル-Bootstrapなどのパッケージをインストールするために必要です。

ネタバレbower.json

 { "name": "app", "version": "1.0.0", "authors": [ "sunway_os <forsag1982@yandex.ru>" ], "description": "lighty build", "license": "MIT", "ignore": [ "**/.*", "node_modules", "bower_components", "test" ], "dependencies": { "bootstrap": "~3.3.5" }

Package.jsonファイル-プラグインのgulpをインストールするために必要です。

スポイラーpackage.json

 { "name": "name", "version": "1.0.0", "repository": "https://github.com/Maxlab", "devDependencies": { "gulp": "^3.9.0", "gulp-livereload": "^3.8.0", "gulp-concat": "^2.5.2", "gulp-csso": "^1.0.0", "gulp-sass": "^1.3.3" } }

Composer.jsonファイル-PHPにパッケージをインストールするために必要です。

Spoiler composer.json

 { "require": { "silex/silex": "<1.2.2", "twig/twig": "~1.13,>=1.13.1", "moust/silex-cache": "1.0.*@dev", "symfony/twig-bridge": "~2.5", "symfony/templating": "~2.6", "silex/web-profiler" : "1.0.6", "monolog/monolog": ">=1.0.0", "symfony/monolog-bridge": "v2.4.2", "firedog/firedog": "dev-master" } }

私の空白
その結果、私はそのような空のSilex + Gulp + LiveReloadを得ました

計画どおり、すべてはコンソールを介していくつかのコマンドで設定されます。 Chrome LiveReloadとFirePHP4Chromeには2つの拡張機能が必要です。
NodeJが必要です。ない場合はセットアップします。

 $ sudo apt-get install nodejs

バウアーも必要です。そうでなければ、それを配置します。

 $ sudo npm install bower -g

フォルダーを作成し、サーバーを構成し、フォルダーに移動してコマンドを実行します。

回

 $ git init && git remote add master git@github.com:Maxlab/silex-gulp-skeleton.git && git remote -v && git fetch master && git checkout master && git remote remove master && cp ./app/config.distr.php ./app/config.php

二

 $ composer install && sudo npm install && bower install && find . -type d -exec sudo chmod 755 {} \; && find . -type f -exec sudo chmod 644 {} \; && gulp

それだけです、プロジェクトを開いて作業できます。

PS
このようなワークピースは、他のフレームワークに対して実行できます。

頻繁に使用する最小限の機能セットを含めましたが、このセットがすべての人を満足させることを望んでいませんが、多くの人に適していると思います。さらに、必要なものをフォークしてセットに追加できます-gulpには多くのプラグインがあります。

Silexスケルトン+ Gulp + LiveReload

More articles: