gulp plate تحميل - gulp plate تنزيل كود المصدر

gulp plate

فئات أخرى

1.0.0

تنزيل

لوحة بلع

نظام Gulp النموذجي والبناء.

يتضمن الأدوات والمهام وسير العمل التالية:

Webpack كمجمع وحدة JavaScript
webpack-dev-middleware لإعادة التحميل المباشر (في تجميع الذاكرة لإعادة البناء بشكل أسرع أثناء التطوير)
تم نقل بناء جملة ES2015 باستخدام Babel
ESLint لفحص جافا سكريبت
أجمل لتنسيق كود جافا سكريبت
تم تجميع SASS باستخدام libsass وخرائط المصدر والبادئة التلقائية وفحص Sass
BrowserSync لإعادة التحميل المباشر والخادم الثابت
svgo لضغط SVG.
gulp-svg-symbols لإنشاء كائن أيقونة SVG مع علامتي <symbol> و <use>

هل تبحث عن إصدار SilverStripe؟ انظر هنا.

التبعيات / التثبيت

تعتمد لوحة Gulp-plate على التقنيات التالية:

Node.js كبيئة مضيفة محلية لـ gulp (الإصدار 7.5.0 أو أعلى) [1]
بلع كمدير المهام
الغزل كمدير التبعية

[1] يوصى بتثبيت Node Trough nvm (Node Version Manager).

للبدء:

$ git clone https://github.com/arillo/gulp-plate myProject
$ cd myProject
$ rm -r .git    # Remove the link to the git repo
$ yarn          # Install dependencies

الأوامر

 # Equivalent
$ yarn run build

قم بتشغيل المهمة الافتراضية وقم بإنشاء نسخة مطورة من الموقع في المجلد dist .

 # Equivalent
$ yarn start
$ yarn run watch

قم بتشغيل المهمة الافتراضية مرة واحدة، وابدأ تشغيل الخادم وراقب تغييرات الملف.

 # Equivalent
$ yarn run prod

قم بتعيين NODE_ENV='production' وقم بإنشاء نسخة إنتاجية من الموقع عن طريق ضغط js وcss وhtml. هذا هو المجلد الذي يجب أن ينتقل إلى الخادم.

إذا كنت تريد تشغيل أي مهمة gulp أخرى، فما عليك سوى إلحاق اسم المهمة بأمر build/gulp:

 # Equivalent
$ yarn run build sprite
$ yarn run b sprite
$ yarn run gulp sprite
$ yarn run g sprite

مهم:

سيتم حذف دليل dist في كل مرة تقوم فيها بتشغيل build / watch / prod. لا تقم بإجراء أي تغييرات في الدليل dist .

هيكل المجلد

myProject/
  gulpfile.js/  # gulp tasks
  src/
    icons/      # SVG files to be included in he the sprite
    images/     # other images
    js/         # js code
    sass/       # Sass code, SCSS and Sass indented syntax possible
    html/       # html templates
      data/     # data in json format
      layouts/  # reusable layout templates
      macros/   # Nunjucks macros
      shared/   # reusable snippets

إعدادات

تم تلخيص كافة المسارات وإعدادات المكونات الإضافية في ملف مركزي: ./gulpfile.js/config.js . قم بتكييف المسارات والإعدادات مع بنية مشروعك واحتياجاته.

تكوين SVG Sprite

يقوم الكائن بإنشاء صورة بالاسم sprite.svg في ./dist/images/ . كما يقوم أيضًا بإنشاء ملف Sass باسم: _sprite.scss في ./src/sass/base/ .

تحتوي ملفات Sass التي تم إنشاؤها على معلومات مفيدة حول أيقونات الكائنات مثل أبعاد كل أيقونة. سيتم تغيير الملف في كل مرة تتم فيها إضافة رمز أو إزالته أو تغييره، فلا تقم بتحريره يدويًا. يمكنك تغيير الملف عن طريق تغيير القالب في ./gulpfile.js/tpl/_sprite.scss .

الأصول الثابتة

لنقل الأصول الثابتة من الدليل المصدر بدون تحويلات، على سبيل المثال، ملفات الخطوط. أضف المسارين src و dest إلى المصفوفة static في الملف config.js

قوالب HTML

تستخدم القوالب Nunjucks. راجع المستندات لمزيد من المعلومات حول كيفية استخدامها.

ساس

يتم استخدام بناء جملة Sass ذات المسافة البادئة بشكل افتراضي. تحتاج ملفات Sass الرئيسية إلى أن يكون لها امتداد .sass ، وإلا سيفشل المترجم. يمكن أن تكون الأجزاء .sass و .scss .

تضمين ملفات CSS للموردين الخارجيين

لتضمين أنماط الجهات الخارجية في استخدامك لـ CSS، قم بتضمينها في ملف main.sass :

 // main.sass

@import url( ' ../../node_modules/normalize.css/normalize.css ' ) ;

سيقوم البرنامج الإضافي postcss بعد ذلك بتضمين الملفات التي تحافظ على خرائط المصدر. بعد تجميع ساس.

احذر من أن Sass سينقل عبارات @import url(...) إلى أعلى ملف CSS الذي تم إنشاؤه، لذا، بغض النظر عن مكان التضمين، سيتم دائمًا تضمين هذه الأنماط في أعلى الملف.

أخطاء ساس لينت

في وقت كتابة هذا المقال، يفشل sass-lint عندما يواجه محددات فارغة. هذا خطأ، يمكن منعه عن طريق إضافة تعليق بمسافة بادئة // بعد المحدد الفارغ:

 .mySelector
  //

.mySelector_child
  text-align : center

جافا سكريبت

يحتوي الملف ./gulpfile.js/config.js على تكوين حزمة الويب الكاملة (راجع متغير js ). لا تتردد في التغيير حسب الحاجة. ضع في اعتبارك أن babel-loader يجب أن يكون موجودًا دائمًا حيث سيعتمد عليه eslint .

سيتم تغيير التكوين قليلاً اعتمادًا على المهمة التي تقوم بتشغيلها. عند استخدام مهمة المراقبة، سيتم تجميع Javascript في الذاكرة، لذلك لن تتم كتابة أي ملفات على القرص (سيكون ./dist/js/ فارغًا) وسيتم حقن webpack-hot-middleware/client في جميع الحزم لإعادة التحميل المباشر للعمل . عند البناء من أجل الإنتاج، يتم استخدام webpack.optimize.UglifyJsPlugin للتصغير. ألقِ نظرة على ./gulpfile.js/util/getWebpackConfig.js لمعرفة ما يحدث بالضبط وتغييره حسب الحاجة.

فيما يلي بعض الوصفات المفيدة لمساعدتك على العمل:

قم بتعريف الأسماء المستعارة للملفات المطلوبة بشكل متكرر

 // gulpfile.js/config.js

const js = {
  resolve : {
    extensions : [ '.js' ] ,
    alias : {
      // Path relative to `context`
      myModule : './myModule/myModule.js' ,
    } ,
  } ,
} ;

 // src/js/some-file.js

import myModule from 'myModule' ;

myModule ( ) ;

المستندات: https://webpack.js.org/configuration/resolve/#resolve-alias

الملئ بالوحدات النمطية غير CommonJs

البرنامج المساعد مسج

 // gulpfile.js/config.js

const webpack = require ( 'webpack' ) ;
//...
const js = {
  plugins : [
    // Make jQuery global, expected by the plugin.
    new webpack . ProvidePlugin ( {
      'window.jQuery' : 'jquery' ,
    } ) ,
  ] ,
  //...
  resolve : {
    // Add extensions to prevent linting errors.
    extensions : [ '.js' , '.json' ] ,
    // Path from `node_modules`, where `myModule` is the module name.
    alias : {
      myModule : 'myModule/dist/myModule.js' ,
    } ,
  } ,
} ;

 // src/js/main.js

import $ from 'jquery' ;
import 'myModule' ;

$ ( '.js-selector' ) . myModule ( ) ;

وحدة جافا سكريبت العادية

 // gulpfile.js/config.js

const js = {
  //...
  resolve : {
    // Add extensions to prevent linting errors.
    extensions : [ '.js' , '.json' ] ,
    // Path from `node_modules`, where `myModule` is the module name.
    alias : {
      myModule : 'myModule/dist/myModule.js' ,
    } ,
  } ,
  module : {
    rules : [
      // ...
      {
        include : require . resolve ( 'myModule/dist/myModule.js' ) ,
        loader : 'exports-loader?MyModule' ,
      } ,
    ] ,
  } ,
} ;

 // src/js/main.js

import $ from 'jquery' ;
import MyModule from 'myModule' ;

const myInstance = new MyModule ( ) ;

المستندات: https://webpack.js.org/guides/shimming/

حزم JavaScript متعددة ومشاركة كود البائع

لإنشاء حزم متعددة، قم بإضافة أجزاء كاملة إلى entry

 // gulpfile.js/config.js

const js = {
  // ...
  entry : {
    main : [ './main.js' ] ,
    other : [ './someFile.js' , './sotherOtherFile.js' ] ,
  } ,
  // ...
} ;

سيؤدي هذا إلى إنشاء حزمتين: main.js و other.js .

إذا قمت بذلك، فمن الأفضل إنشاء حزمة أخرى تحتوي على جميع أكواد البائع المشتركة:

 // gulpfile.js/config.js

const webpack = require ( 'webpack' ) ;
//...
const js = {
  // ...
  entry : {
    main : [ './main.js' ] ,
    other : [ './someFile.js' , './sotherOtherFile.js' ] ,
    // List vendor modules here:
    vendor : [ 'jquery' , 'svg4everybody' ] ,
  } ,
  // ...
  plugins : [
    new webpack . optimize . CommonsChunkPlugin ( {
      name : 'vendor' , // Specify the common bundle's name
    } ) ,
  ] ,
  // ...
} ;