🥗 👨🏽‍🔬 👴🏻 GruntJSの経験 🛠️ ✋🏿 👨🏿‍🚀

こんにちは私たちはついに1冊のインタラクティブな本の作業を終えました。そして今、私が使用した最も興味深いツールの1つであるGruntJSについてお話したいと思います。

プロジェクトについて少し

実際、私たちはロシアの人気作家のインタラクティブな本を作りました。この本は、JS、ECT-JS、LESSテンプレートで書かれています。 Gruntは、アセンブリ、連結、縮小、展開に取り組んでおり、Phonegapの下でiPadで動作します。

技術的には、プロトタイプを作成しました-さまざまな技術を積極的に研究し、応用しました。何かで、それは非常にクールなものになりました。それはそうかもしれないが、本は機能し、App Storeからダウンロードすることさえできる。

それで十分だと思います。これでGruntJSにアクセスできます...

グラントブレイン

-2つの変数がありますが、どのように追加できますか？

-プラグイン「jquery.math」を追加しました。非常に便利です。

少し誇張されていますが、有益な話をします。私たちのプロジェクトの主なグラフィックス形式は、透過性のあるPNG24です。プロジェクトは約500MBを占有しました。最適化することにしました。もちろん、GruntJSのプラグインを使用して...

健全な結果はありませんでした。 500MBはどのフレームワークにも適合しませんでした。 450Mbにはほとんど圧縮されていません。その結果、数日間の検索の後、250MBを削減しました。このように：

find . -name "*.png" | xargs pngquant -f -v --ext .png --quality 0-90

GruntJSは素晴らしいですが、中毒性があります。もちろん、この話は少し誇張されていますが、私は本当に人々がそのようなことをする方法を見ました。プラグインにjQueryを通知します。それでも、bashのワンライナーを使用したり、実績のあるコンソールで実証済みのユーティリティを接続したりする方が簡単な場合があります。

一般に、buntスクリプトとコマンドはgruntを介して実行できます。このためのうなり声があります。

 grunt.initConfig({ shell: { compressPNG: { options: { stdout: true }, command: 'find . -name "*.png" | xargs pngquant -f -v --ext .png --quality 0-90' } } }); grunt.loadNpmTasks('grunt-shell'); grunt.registerTask('compress', ['shell: compressPNG']);

Gruntfile.jsの構成

このプロジェクトでは、Gruntfile.jsに約200行のコードが含まれており、ロジックとパラメーターが混在しています。 Gruntfile用に個別の構成を作成することにしました。この目的のためのプロジェクトでは、config.jsonファイルを作成し、その中に以下を保存します。

ソースディレクトリ
展開用ディレクトリ
テンプレートエンジンの変数（たとえば、本の名前）
リストを無視する（展開に該当しないファイル）
LESSファイルリストと宛先ファイル
JSファイルリストとターゲットファイル
テストのためにサーバーにデプロイするためのパラメーター

これには多くの利点があります。第一に、ファイルの追加がはるかに簡単になり、第二に、Gruntに完全に馴染みのない人が構成に小さな変更を加えることができます。さて、3番目では、ロジックがパラメーターと混ざり合っていません。

構成は次のようになります。

 { "src": "_src", "dst": "www", "port": 8000, "variables": { "bookname": "  "}, "ignore": [ "**/*.ect", "**/*.md", "**/*.less"], "less": { "www/app/assets/css/app.min.css": ["_src/app/assets/less/main.less"], "www/content/assets/css/content.min.css": ["_src/content/assets/less/main.less","_src/content/widgets/**/widget.less"] } }, "js": { "www/app/assets/js/app.min.js": [ "_src/app/assets/js/utilities.js", "_src/app/assets/js/modules/*.js", "_src/app/assets/js/setups/*.js", "_src/content/widgets/**/*.js" "_src/app/assets/js/init.js", ] } }

Gruntfileの例

 module.exports = function (grunt) { //  config.json var config = grunt.file.readJSON('config.json') || grunt.fatal('config.json not found'); //     - config.ignore = getIgnorePatterns(config); var tasks = { clean: { dst: path.join(config.dst, '**/*'), ignore: config.ignore }, livereload: {…}, regarde: {…}, copy: {…}, ect: {…}, less: {…}, uglify: {…}, rsync: {…} }; grunt.initConfig(tasks); grunt.registerTask('lvrld', ['livereload-start', 'connect', 'regarde']); grunt.registerTask('main', ['clean:dst', 'copy:main', 'clean:ignore','uglify:main', 'ect', 'less:browser']); grunt.registerTask('browser', ['main', 'lvrld']); grunt.registerTask('phonegap', ['clean:dst', 'copy:main', 'clean:ignore', 'uglify:main', 'less:phonegap', 'ect']); grunt.registerTask('deploy', ['main', 'rsync:deploy']); grunt.registerTask('default', ['browser']); require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); };

デバイスでの便利なデバッグ

iPadとMacBookのペアでのコードのデバッグは非常に不便です。常に手でページを更新する必要があります。これはひどいです。

ここでGruntが役立ちます。 grunt-contrib-watchを実行し、livereloadを構成し、すべてのデバイスをIPで接続すると、コードを変更すると、すべてのガジェットがページ自体をリロードします。これはすごい！真剣に、3つのデバイスでもページを常にリロードする場合、1時間以内にすべてをチップに粉砕します。

一般的に、問題があります。プロジェクトには比較的多くのファイルがあります。約1000 2.したがって、すべてを異なるライブリロード（もちろん異なるタスク）でカバーすると、nodejsが落ち始めます。完全な補償を拒否する必要があります。私たちはナイフの写真の下に行きました。

プラグインを書く

一般に、テンプレートエンジンは非常に単純に選択しました。最初のテンプレートエンジンはレイアウトとパーシャルを使用しました。最初のものはECTJSであることが判明しました。今、私は玉を取りますが、それから私はこれを取りました。テンプレートエンジンに適したプラグインが見つからないため、独自のプラグインを作成することにしました。

一般に、gruntjsのプラグインの作成は非常に簡単です。必要となる可能性のあるほぼすべてのものが指示書に書かれています。一般的に、アルゴリズムは次のとおりです。

1. grunt-init gruntplugin

はプロジェクト構造を作成します

2.コードを記述し、モジュールを接続します...

3.必要な場合-GruntJS APIを覗いてください

一般的に、それは私が共有したかったすべてです。

GruntJSの経験