Clever Geek Handbook

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スプライト生成をコレクターに追加できます。


More articles:


All Articles