Geekly Articles each Day

1C-Bitrixでの高速開発またはgulpとの出会い



この記事では、 Gulpコレクターを使用して、Bitrix cms用に構成されたフロントエンド開発環境を示します。 まず第一に、これは優れたコレクターのフードの下にあるツールのセットであり、これにより日常作業からあなたを救い、開発を大幅に加速します。

判断しないでください


運命が起こったので、CMS 1C-Bitrixに出会いました。 私はそれがいかにかさばって「汚い」かを完全に理解していますが、私はそれが何であるかに対処しなければなりません。 これに基づいて、この記事を批判しないよう強くお願いします。これは主にこのシステムで作業する人を対象としています。

始めましょう


最初に行う必要があるのは、作業環境をセットアップすることです。つまり、nodejsに付属のnpmパッケージマネージャーを取得します。 停止し、若いbitrixoidsを停止します。実行しません。Windowsでもインストールでき、コンソールでも機能します。チェックされています。 また、質問がある場合は、googleが役立ちます（ユーザー環境変数に注意してください。npmコマンドがグローバルになるように、パスのスペルを正しく指定する必要があります）。

npmをインストールすると、必要な依存関係をすべてインストールする機会が得られます。 これを行うには、ファイルを作成します。

package.json


{ "name": "frontend-bitrix", "version": "1.0.0", "description": "", "author": "jmaks", "license": "ISC", "dependencies": { "gulp": "^3.8.11", "gulp-autoprefixer": "^2.1.0", "gulp-minify-css": "^1.0.0", "gulp-rigger": "^0.5.8", "gulp-sass": "^1.3.3", "gulp-uglify": "^1.1.0", "gulp-sourcemaps": "^1.5.0", "gulp-watch": "^4.1.1", "gulp-imagemin": "^2.2.1", "imagemin-pngquant": "^4.0.0", "gulp.spritesmith": "latest", "gulp-plumber": "latest" } }

このファイルには、コレクターに必要なすべてのパッケージのリストが含まれています。詳細を検討してください。


Bowerのような優れたパッケージマネージャーも必要です。 最初にnpmを使用してインストールし（bowerのインストールは依存関係のインストールとは別に、bowerをグローバルにインストールする必要があるため）、次に同じ方法で設定ファイルを作成します。

bower.json


 { "name": "frontend-bitrix", "version": "0.0.1", "authors": [ "jmaks1 <my.mailname@mail.ru>" ], "license": "MIT", "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ], "dependencies": { "jquery": "2.*", "bootstrap-sass": "*" } }

ここでは、すべてがpackage.jsonに似ています。ダウンロード可能なパッケージのリストを含む依存関係ブロックがあります。 ここで、jqueryとbootstrap-sassをロードします。

すでにお気付きのように、私はたくさんのブートストラップとcss sassプリプロセッサを使用しています。
最初の点-ブートストラップでは、1C-Bitrix自体が徐々にこのCSSフレームワークを使用し始めているという事実を考慮して使用します（まあ、私はすでに慣れています）。
2番目のポイント-Sass。 このプリプロセッサは、私が本当に気に入っていた後者よりも機能的ですが、彼はSassと競合できませんでした。

新しいプロジェクト構造を作成する


新しいストア/ポータル/「Bitrix上の他の何か」を作成するローカルサーバーに必要なBitrixのエディションをインストールします。 インストール中に、開始テンプレートから既製のテンプレートを選択し、デモデータでサイトが乱雑にならないようにインストールウィザードを単にキャンセルします。その結果、次のサイト構造が得られます。
auth
ビトリックス
アップロードする

次に、ビルドファイルと開発ファイルのセクションを作成します。 ビルドはサイトテンプレートであり、すべてのファイルがその中に収集されます。/local/ディレクトリに配置する必要があります。 タンクにいる人のために-このディレクトリは/ bitix /と同等です。つまり、コンポーネントやテンプレートなどを作成できます。 / src /ディレクトリで開発を行い、その中に単純な構造を作成します。

その結果、以下が得られます。
auth
ビトリックス
アップロードする
ローカル
-テンプレート
--メイン
src
-フォント
-画像
-スプライト
-js
--パーシャル
-スタイル
--パーシャル

ここではすべてが簡単です。
ローカルディレクトリには、基本的なサイトテンプレートmainが含まれています。
srcディレクトリには次が含まれます。


partialsディレクトリのファイルはどちらの場合も追加されます。それぞれメインファイルに含めるだけで、script.jsではすべてのスクリプトを接続し、template_styles.scssでは追加のスタイルファイルをすべて追加します。

script.jsの// =コンストラクトにファイルを含めます。

 // include jquery //= ../../bower_components/jquery/dist/jquery.min.js // include bootstrap.js //= ../../bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js console.log("i'm a live!"); // another scripts //= partials/app.js

@importを使用してscssファイルを接続します。

 // include bootstrap sass @import "../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap"; // include variables @import "partials/variables"; // include sprite @import "partials/sprite"; // include mixin @import "partials/mixin"; // include fonts @import "partials/fonts";

プロジェクト構造を受け取ったら 、 bower.jsonおよびpackage.jsonファイルをそのルートに追加します。 コレクターの設定ファイルgulpfile.jsを作成することのみが残ります。 このファイルは、すべての魔法を担当します。

gulpfile.js


package.jsonファイルに登録したすべての依存関係は、 gulpfile.js内で接続されています 。

 'use strict'; var gulp = require('gulp'), watch = require('gulp-watch'), prefixer = require('gulp-autoprefixer'), uglify = require('gulp-uglify'), rigger = require('gulp-rigger'), sass = require('gulp-sass'), sourcemaps = require('gulp-sourcemaps'), cssmin = require('gulp-minify-css'), imagemin = require('gulp-imagemin'), pngquant = require('imagemin-pngquant'), spritesmith = require('gulp.spritesmith'), plumber = require('gulp-plumber');

必要に応じて1か所で簡単に編集できるように、すべてのパスでパスオブジェクトを作成します。 それらはタスクによって使用されます（タスクはタスクであり、マネージャーにタスクを設定し、彼はすべてをすばやく実行します）。

 var path = { build: { js: 'local/templates/main/', css: 'local/templates/main/', images: 'local/templates/main/images/', fonts: 'local/templates/main/fonts/', fontsBootstrap:'local/templates/main/fonts/bootstrap/' }, src: { js: 'src/js/script.js', styles: 'src/styles/template_styles.scss', stylesPartials:'src/styles/partials/', spriteTemplate:'src/sass.template.mustache', images: 'src/images/**/*.*', sprite: 'src/sprite/*.*', fonts: 'src/fonts/**/*.*', fontsBootstrap:'bower_components/bootstrap-sass/assets/fonts/bootstrap/*.*' }, watch: { js: 'src/js/**/*.js', styles:'src/styles/**/*.scss', images:'src/images/**/*.*', sprite:'src/sprite/*.*', fonts: 'src/fonts/**/*.*' } };

すべての依存関係を接続し、ルートを作成したら、コレクターのすべての作業を担当するタスクを作成します。

JSファイルコレクター
 gulp.task('js:build', function () { gulp.src(path.src.js) //   main  .pipe(plumber()) .pipe(rigger()) //   rigger .pipe(sourcemaps.init()) //  sourcemap .pipe(uglify()) //   js .pipe(sourcemaps.write()) //   .pipe(plumber.stop()) .pipe(gulp.dest(path.build.js)) //     build });

Cssファイルコレクター
 gulp.task('styles:build', function () { gulp.src(path.src.styles) //   main.scss .pipe(plumber()) .pipe(sourcemaps.init()) //       js .pipe(sass()) //  .pipe(prefixer()) //    .pipe(cssmin()) //  .pipe(sourcemaps.write()) //   .pipe(plumber.stop()) .pipe(gulp.dest(path.build.css)) //   build });

すべての画像の圧縮を担当するタスク
 gulp.task('image:build', function () { gulp.src(path.src.images) //   .pipe(plumber()) .pipe(imagemin({ //  progressive: true, svgoPlugins: [{removeViewBox: false}], use: [pngquant()], interlaced: true })) .pipe(plumber.stop()) .pipe(gulp.dest(path.build.images)) });

タスク収集スプライト
 gulp.task('sprite:build', function() { var spriteData = gulp.src(path.src.sprite) .pipe(spritesmith({ imgName: 'sprite.png', cssName: 'sprite.scss', cssFormat: 'scss', algorithm: 'binary-tree', padding: 20, cssTemplate: path.src.spriteTemplate, cssVarMap: function(sprite) { sprite.name = 's-' + sprite.name } })); spriteData.img.pipe(gulp.dest(path.build.images)); spriteData.css.pipe(gulp.dest(path.src.stylesPartials)); });

スプライトフォルダーからすべてのアイコンを取得し、sass.template.mustacheファイルに基づいて並行してスプライトを生成し、アイコンのすべてのサイズと位置が書き込まれるscssファイルを作成します。

sass.template.mustache


 {{#items}} ${{name}}: {{px.x}}, {{px.y}}, {{px.offset_x}}, {{px.offset_y}}, {{px.width}}, {{px.height}}, {{px.total_width}}, {{px.total_height}}, '{{{escaped_image}}}'; {{/items}}

フォントを転送してビルドする
 //  bootstrap',    gulp.task('icons:build', function() { gulp.src(path.src.fontsBootstrap) .pipe(gulp.dest(path.build.fontsBootstrap)); }); //     src gulp.task('fonts:build', function() { gulp.src(path.src.fonts) .pipe(gulp.dest(path.build.fonts)) });

最後の2つのタスクを作成し、すべての作業を開始します。 1つ目は実行に、2つ目はファイルの変更を監視するために必要です。そのため、常にマネージャーを再起動する必要はありません。

 gulp.task('build', [ 'js:build', 'sprite:build', 'icons:build', 'fonts:build', 'styles:build', 'image:build', ]); gulp.task('watch', function(){ watch([path.watch.js], function(event, cb) { gulp.start('js:build'); }); watch([path.watch.sprite], function(event, cb) { gulp.start('sprite:build'); }); watch([path.watch.styles], function(event, cb) { gulp.start('styles:build'); }); watch([path.watch.fonts], function(event, cb) { gulp.start('fonts:build'); }); watch([path.watch.images], function(event, cb) { gulp.start('image:build'); }); }); gulp.task('default', ['build', 'watch']);

その結果、プロジェクトのルートに3つの構成ファイルを取得し、コンソールでコマンドを記述して実行します。


利益！

まとめ


ローンチが成功した後、便利な開発環境ができました。 ファイルの圧縮バージョン（スクリプト、スタイル、画像）がテンプレートに自動的に生成されます。 Githubから構成済みのバージョンをダウンロードします。 アーカイブを新しいサイトのあるディレクトリに解凍し、コンソールからコマンドを実行するだけで十分です。

落とし穴


サイトのバックアップコピーを作成する前に、ディレクトリnode_modulesおよびbower_componentsに例外を置くことを忘れないでください。そうしないと、バックアップコピーは作成されません。 これらのフォルダーは開発にのみ必要であり、サイトの「戦闘」バージョンでは必要ありません。


PS
この記事は、「 フロントエンドプロジェクトの快適な組み立て 」という記事に由来しています-よく理解しておくことをお勧めします。
興味がある人は、svgスプライト生成をコレクターに追加できます。

Source: https://habr.com/ru/post/J261467/

More articles:


All Articles