composer create-projectによってDrupal10.xの初期構築を行うパッケージ。
最初に composer をインストールしてください。
下記のコマンドでプロジェクトを作成します。
# {some-dir} は Drupal をインストールするディレクトリ.
composer create-project studioumi/drupal-project:10.x-dev {some-dir} --no-interactionプロジェクト作成後、インストールディレクトリへ移動しDrupalの初期インストールを実行します。
cd {some-dir}
drush site:install --account-name=admin --account-mail=foo@example.com --account-pass=pass --locale=ja --db-url=mysql://user:password@host:port/dbname初期インストール後、 settings.php を変更しgitの初期化を行います。
git init
git commit -m "initial commit."以下コマンドでDDEV環境が起動します。 DDEVのインストールは事前に行ってください。( https://ddev.readthedocs.io/en/stable/ )
ddev startコントリビュートモジュールやその他ライブラリをインストールする場合
composer require ... コマンドで導入できます。
cd some-dir
composer require drupal/devel:~1.0composer updateを利用し、パッケージをアップデートします
composer update drupal/core-* --with-dependenciesgit diffで差分の確認を行います。その際、.htaccessやrobots.txt等のファイルも更新される為 必要に応じて差分の取り込みを行います。
コア等の挙動に問題があり、パッチを当てる必要がある場合 composer.json へ適用するパッチを記載します。
これは composer-patches によって自動的にパッチが適用されます。
"extra": {
"patches": {
"drupal/foobar": {
"Patch description": "URL or local path to patch"
}
}
}以下コマンドで実行するPHPのバージョンを固定することが出来ます。
composer config platform.php 8.1本パッケージにはカスタムモジュール/テーマのフロントエンド開発を楽にするためのタスクランナーとリンターが含まれています。これらを利用するにはローカル環境で Node.js と Yarn を使えるようにしてください。
次のコマンドを実行して必要な Node.js のパッケージをインストールします。
yarnSCSS で書かれたファイルを Drupal のコーディングスタンダードをベースとしたものに則ってチェックします。
npx stylelint <file_name>
# カスタムモジュールを一括で stylelint する例
npx stylelint app/modules/custom/**/*.scssES6 の JavaScript で書かれたファイルを Drupal のコーディングスタンダードに則ってチェックします。
npx eslint <file_name>
# カスタムモジュールを一括で eslint する例
npx eslnt app/modules/custom/**/*.es6.jsBrowsersync の起動や、SASS(SCSS) および ES6 で書かれた JavaScript のトランスパイルなどのタスクを自動化するタスクランナーです。
npx gulp [tasks]gulp 実行時にタスクを指定しなかった場合は Browsersync が起動し、SCSS および JavaScript(ES6) のファイルを監視して更新があった時にトランスパイルします。
利用可能なタスク:
| タスク | 説明 |
|---|---|
build:scss |
カスタムモジュール・テーマ内にある、SCSSファイル(拡張子が .scss のもの)をCSSにトランスパイルします。 |
build:js |
カスタムモジュール・テーマ内にある、ES6のJavaScriptファイル(拡張子が .es6.js のもの)をにトランスパイルします。 |
build |
ビルドタスクを一括して行います。 |
lint:scss |
カスタムモジュール・テーマ内にある、SCSSファイルを stylelint でチェックします。 |
lint:js |
カスタムモジュール・テーマ内にある、ES6のJavaScriptファイルを ESLint でチェックします。 |
lint |
リンタータスクを一括して行います。 |
watch:scss |
カスタムモジュール・テーマ内にある、SCSSファイルを監視して更新があった際にビルドタスクを実行します。 |
watch:js |
カスタムモジュール・テーマ内にある、ES6のJavaScriptファイルを監視して更新があった際にビルドタスクを実行します。 |
watch:twig |
カスタムモジュール・テーマ内にある、Twig テンプレートを監視して更新があった際にブラウザをリロードします。 |
watch |
監視タスクを一括して行います。 |
各タスクのデフォルトのオプションを変更したい場合は、 gulpfile.js/config/example.local.yml のファイルを gulpfile.js/config/local.yml にコピーして設定をオーバーライドます
Browsersync のポートを変更したい場合は次の様に定義します。
browsersync:
port: 8080デフォルトの設定やその他のオプションについて詳しく知りたい場合は、 gulpfile.js/config/default.yml に書かれたコメントを参照してください。
本プロジェクトは drupal-composer/drupal-project のフォークプロジェクトです。 詳細な内容はそちらを参照ください。
drupal/core->drupal/core-recomendedへの置き換え- drupal-composer/drupal-paranoia の利用
- DDEV の実行環境