frontend starter

قالب المشروع

لأن تطوير الويب لا يحتاج إلى أن يكون ألمًا.

قالب المشروع هو السبيل لبناء مواقع ثابتة بسرعة. من خلال أمر واحد ، قم بإنشاء صفحة ثابتة باستخدام WebPack و Gulp و Handlebars.js و SCSS.

[ES6]

سمات

• قم بتثبيت المشروع في ثلاثة أوامر فقط (انظر "تطوير" أدناه).
• استخدم المقود.
• استخدم SCSS للحفاظ على CSS منظمة في مكونات منطقية.
• استخدم Browsersync لإطلاق إصدار تطوير من موقعنا تلقائيًا ، وإعادة تحميل الصفحة كلما قمنا بتغيير HTML ، وحقن التغييرات على CSS و JavaScript والصور مع الحاجة إلى إعادة تحميل.
• استخدم Minifier HTML ، وحسن HTML ، CSS ، JavaScript ، والصور ، على التوالي.

كل شيء مع أمر واحد من المحطة:

yarn start

يثبت

npm install -g gulp  # May require `sudo` 

النمو

yarn install            # One time
gulp serve

تذكير

إذا كنت ترغب في استخدام هذا الريبو لمشروعك التالي ، فتأكد من إجراء التغييرات التالية:

1. تحرير data.yml ، وملء البيانات الوصفية HTML المرتبطة بموقعك.
2. تحرير package.json توفير name ، version ، description ، license ، و repository.url .
3. قم بإزالة مجلد .git ، بحيث تبدأ من تاريخ الالتزام الجديد.
4. تحرير README.md لتفضيلاتك.

أوامر Gulp

نظرة عامة على أوامر Gulp المتاحة:

gulp build

يبني الموقع في dist Directory. وهذا يشمل:

• SCSS ، sourcemaps و autoprefix
• JS Uglification
• المقاود إلى HTML

gulp build:optimized

يستخدم هذا لتوزيع نسخة محسّنة من الموقع (للنشر). ويشمل كل شيء بدءًا من gulp build وكذلك:

• Minification SCSS
• CSS / JS مضمّن المصدر

gulp watch

ساعات للتغييرات في الملفات المحلية وإعادة بناء أجزاء من الموقع حسب الضرورة ، في dist Directory.

gulp serve

يدير gulp watch في الخلفية ، ويخدم dist Directory في localhost:3000 مع إعادة التحميل التلقائي باستخدام Browsersync.

بناء

├── webpack.config.dev.js   # Controls javascript and css bundling
├── Gulpfile.js             # Controls Gulp, used for building the website
├── README.md               # This file
├── data.yml                # Metadata associated with the site.
├── dist/                   # Gulp builds the static site into this directory
├── package.json            # Dependencies
└── src/                    # All source code
    ├── assets/ 
        ├── css/            # Stylesheets
        ├── font/           # Font files
        ├── img/            # Images and SVGs
        ├── js/             # Javascript libraries and scripts
    ├── views/     
        ├── partials/       # Handlebars HTML partials that are included / extended
        └── templates/      # Handlebars HTML files, one per page on the site.