آموزش بوت استرپ 4: کار با NPM ، Grunt.js و Sass - قسمت اول

گزینه‌های زیادی برای نصب بوت‌ استرپ وجود دارند که توسعه‌دهندگان می‌توانند از آن‌ها استفاده کنند. این گزینه‌ها عبارت‌اند از برنامه‌های مدیریت پکیج مانند Bower، Composer، Meteer و NPM و یا استفاده دستی از فایل‌های بوت استرپ. در این دو مجموعه آموزش پیش رو می‌خواهیم به شما آموزش دهیم که چطور می‌توانید با استفاده از npn و Grunt.js بوت استرپ و Sass را نصب کرده و به‌راحتی با آن‌ها کار کنید.

مقاله مرتبط: آموزش Bootstarp ٤: کار با nmp، Grunt.js و Sass -قسمت دوم

Node Package Manager چیست؟

npm مخفف یا Node Package Manager، مدیریت پکیج پیش‌فرض برای محیط اجرایی جاوا اسکریپت Node.js است.

Node.js نوشتن کدهای جاوا اسکریپت برای برنامه‌ها را راحت‌تر کرده و توسعه‌دهندگان می‌توانند کدها را با دیگران به اشتراک گذاشته و یا از کدهای قبل استفاده مجدد کنند، همچنین کدهای به اشتراک گذاشته شده همواره به‌روزرسانی می‌شود.

Node.js با زبان C++ و بر اساس موتور جاوا اسکریپت V8 نوشته شده و هدف آن فراهم کردن یک محیط سرور برای اجرای برنامه‌ها است. با گذشت زمان، توسعه‌دهندگان شروع به استفاده از Node.js به‌عنوان یک نرم‌افزار خودکارسازی وظایف که محیط جدیدی را برای ابزارهای مبتنی بر Node مانند Grunt و به‌منظور بهبود وظایف توسعه بخش Front End کردند.

چرا باید از npm برای نصب بوت استرپ استفاده کنیم؟

استفاده از npm مزایای زیادی دارد. دانلود بوت استرپ توسط npm در زمان شما صرفه‌جویی زیادی می‌کند. می‌توانید به‌جای استفاده از سورس فایل، یک نسخه محلی از آن سورس را تنها با اجرای چند دستور در محیط ترمینال دریافت کنید. npm در ابتدا برای دریافت ماژول‌های Node استفاده می‌شد، اما با افزایش قابلیت‌های جاوا اسکریپت، امکانات npm هم افزایش پیدا کرد. در حقیقت شما می‌توانید Com Pass و پلاگین‌های مفید دیگر را توسط npm دانلود کنید.

مقاله مرتبط: Bootstrap چیست؟

نصب Node.js

برای اینکه بتوانیم از این ابزار در Node.js استفاده کنیم، باید ابتدا مدیریت پکیج Node را نصب کنیم. با نصب Node.js، مدیریت پکیج Node هم به همراه آن نصب می‌شود. توسط npm می‌توانید علاوه بر نصب پکیج‌ها، آن‌ها را سفارشی‌سازی کنید. به صفحه رسمی Node.js رفته و نسخه‌ای که نیاز دارید را دانلود کنید. سه نسخه برای کاربران مک، ویندوز و لینوکس وجود دارد. برای نصب روی دکمه Next کلیک کرده و محل نصب را بنا به سلیقه خود انتخاب کنید تا فرآیند نصب آغاز شود.

نصب Node.js

بررسی نصب بودن npm

برای تأیید اینکه آیا فرآیند نصب موفقیت‌آمیز بود یا خیر، از Node استفاده می‌کنیم. در اینجا از محیط کنسول Git Bash در ویندوز استفاده می‌کنیم؛ اما کاربران مک و لینوکس می‌توانند از ترمینال استفاده کنند. ترمینال را باز کرده و دستور npm update-g npm را برای بررسی بروز بودن npm اجرا کنید. برای بررسی اینکه کدام نسخه npm در حال حاضر نصب شده است، دستور npm -v را اجرا کنید. در این مثال از نسخه ۷/۱۴/۲ استفاده می‌کنیم.

بررسی نصب node.js

ماژول‌های Node

npm پکیج‌ها را به دو حالت محلی و سراسری نصب می‌کند. حالت محلی، پکیج‌ها را در فولدور node-Modules در دایرکتوری که در حال حاضر پروژه در آن ایجاد شده، نصب می‌کند؛ اما در حالت سراسری پکیج‌ها در مسیر {Prefix}/lib/node-modules/ که مربوط به مسیر Root است (منظور از Root، محلی است که ویندوز در آن نصب شده است). {Prefix} معمولاً به /usr/ یا /usr/lical/ اشاره دارد.

همچنین می‌توانید از Sudo برای برای نصب سراسری پکیج‌ها استفاده کنید.

اگر می‌خواهید پکیج‌ها را به‌صورت سراسری نصب کنید باید از برچسب –global یا به‌اختصار –g استفاده کنید. فرض کنید می‌خواهیم uglify (یک پروسه/ فشرده‌ساز جاوا اسکریپت) را به‌صورت سراسری نصب کنیم، برای این کار از دستور npm install uglify-js–global استفاده می‌کنیم.

نصب پکیج npm در global

نصب پکیج‌ها به‌صورت عملی

اگر هنگام نصب یک پکیج از برچسب –global استفاده نشود، آن پکیج به‌صورت محلی نصب می‌شود. پکیج‌های یک به این صورت نصب می‌شوند، در داخل فولدر Node-modules و در دایرکتوری که پروژه‌تان را در آن ایجاد کرده‌اید، قرار می‌گیرند.

حال فرض کنید که می‌خواهیم uglify را به‌صورت محلی نصب کنیم. برای این کار از دستور NPM Install uglify-js در ترمینال استفاده می‌کنیم.

نصب npm به صورت local

در قسمت‌های بالا، مباحث پایه‌ای NPM را پوشش دادیم. حال در این قسمت می‌خواهیم ببینیم که چطور از Grunt.js و NPM برای سرعت بخشیدن به فرآیند توسعه استفاده کنیم. در صورتی که مایلید اطلاعات بیشتری درباره npm به دست آورید، می‌توانید به مستندات رسمی آن مراجع کنید.

استفاده از Grunt.js به همراه npm

اگر شما یک توسعه‌دهنده Front end باشید، احتمالاً همیشه کارهای زیر را به‌صورت دستی انجام می‌دهید:

اتصال فایل‌های js و css به هم برای محصول نهایی
فشرده کردن اندازه فایل‌های js، css و تصاویر
استفاده از sass و کامپایل آن به فرمت css
نصب ابزارهای ضروری برای توسعه وب

تمام این کارها را می‌توانید توسط Grunt.js به‌راحتی انجام دهید. Grunt یک ابزار خط فرمان عملیات محور است که چرخه کاری برنامه را توسط کاهش تلاش موردنیاز برای آماده کردن فایل‌ها برای محصول نهایی، افزایش می‌دهد.

Grunt روی Node.js و از طریق NPM اجرا می‌شود، اما برای استفاده از آن نیازی به دانستن Node.js ندارید، همان‌طور که برای استفاده از sass نیازی به دانستن Ruby نیست.

در ابتدا ممکن است ترسناک به نظر برسد، اما در این بخش آموزش به شما کمک می‌کنیم تا آن را به‌راحتی درک کنید و ببینید که چطور می‌شود از Grunt.js در محیط توسعه بوت استرپ و Sass استفاده کنید.

چرا باید از Grunt.js استفاده کنیم؟

Grunt عملیات را اجرا می‌کند. شما عملیات موردنظرتان را مشخص کرده و Grunt تمام آن‌ها را برای شما اجرا می‌کند. این ابزار برای ساده‌تر کردن کارهایی که به‌صورت دستی انجام می‌دهید، قابلیت‌های زیادی را ارائه می‌کند.

در زیر دلایلی که باعث می‌شود از Grunt استفاده کنید، آورده شده است.

این ابزار یکی از محبوب‌ترین اجراکننده عملیات است که پشتیبانی گسترده‌ای از آن می‌شود.
می‌تواند فایل‌های Sass را به css تبدیل کند.
می‌تواند فایل‌های css را فشرده کند.
می‌تواند برای بررسی خطاهای جاوا اسکریپت استفاده شود.
می‌تواند تمام اسکریپت‌هایی که در پروژه استفاده می‌شود را در یک فایل الحاق کند.
فایل‌ها را برای بررسی تغییرات انجام شده روی آن زیر نظر می‌گیرد و عملیاتی که نیاز باشد را بر می‌گرداند.
تعداد زیادی عملیات خودکارسازی شده پیش‌فرض دارد که می‌توانید از آن‌ها استفاده کنید.

راه‌اندازی

قبل از نصب Grunt.js ابتدا یک دایرکتوری برای پروژه ایجاد کنید. سپس فایل‌ها و پوشه‌های زیر را در آن بسازید.

ساختار فایل grunt

ساختار فایل‌ها

ساختار فایل npm

نصب Grunt.js

چون قبلاً Node.js را نصب کردیم، می‌توانیم grunt.js را به‌طور مستقیم توسط npm نصب کنیم. ترمینال یا Command ویندوز را باز کنید (در اینجا از خط فرمان git bash استفاده می‌کنیم) و به دایرکتوری پروژه‌تان بروید، سپس با دستور NPM install -g grunt-cli، Grunt را نصب کنید.

نصب grunt

نکته: شما می‌توانید در سیستم‌عامل‌های OSX، *nix، BSD و … از Sudo استفاده کنید. در ویندوز command shell را به‌عنوان administrator برای اجرای دستور فوق ایجاد کنید. این کار دستور grunt را در system path سیستم‌عامل قرار می‌دهد و می‌توانید در همه جای برنامه از آن استفاده کنید. سپس فایل‌های Package.json و Gruntfile.js را در فولدر پروژه ایجاد کنید.

json: این فایل توسط npm ایجاد می‌شود و یک لیست از تمام ماژول‌ها و metadata های پروژه در آن لیست می‌شوند. همچنین باید Grunt و پلاگین‌های مربوط به آن را در بخش devDefendencies ذخیره کنیم.
js: این فایل برای پیکربندی یا تعریف عملیات و بارگذاری پلاگین‌های grunt استفاده می‌شد.

نکته: ما در این آموزش پلاگین‌های Grunt را به‌صورت دستی از طرفین Package.json به‌روزرسانی می‌کنیم، اما شما می‌توانید از ترمینال برای قرار دادن خودکار پلاگین‌ها در بخش devDefendencies استفاده کنید. همچنین باید لیست پلاگین‌هایی که نیاز داریم را در این بخش وارد کنیم. کدهای زیر را کپی کرده و در فایل Package.json قرار دهید.

{
  "name": "bootstrap4-sass",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-compass": "^1.0.4",
    "grunt-contrib-concat": "^0.5.1",
    "grunt-contrib-cssmin": "^0.14.0",
    "grunt-contrib-imagemin": "^1.0.0",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-sass": "^0.9.2",
    "grunt-contrib-uglify": "^0.11.0",
    "grunt-contrib-watch": "^0.6.1"
  }
}

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

{

"name": "bootstrap4-sass",

"version": "۰.۱.۰",

"devDependencies": {

"grunt": "~۰.۴.۵",

"grunt-contrib-compass": "^۱.۰.۴",

"grunt-contrib-concat": "^۰.۵.۱",

"grunt-contrib-cssmin": "^۰.۱۴.۰",

"grunt-contrib-imagemin": "^۱.۰.۰",

"grunt-contrib-jshint": "~۰.۱۰.۰",

"grunt-contrib-nodeunit": "~۰.۴.۱",

"grunt-contrib-sass": "^۰.۹.۲",

"grunt-contrib-uglify": "^۰.۱۱.۰",

"grunt-contrib-watch": "^۰.۶.۱"

}

پلاگین‌های Grunt که در بالا تعریف شده عبارت‌اند از:

grunt-contrib-compass: برای کامپایل Sass به css از پلاگین Compass استفاده می‌کنیم.
grunt-contrib-concat: برای الحاق فایل‌ها استفاده می‌شود.
grunt-contrib-cssmin: برای فشرده کردن فایل‌های css
grunt-contrib-imagemin: برای فشرده کردن تصاویر
grunt-contrib-jshint: برای پیدا کردن خطاها و مسائل احتمالی در کدها استفاده می‌شود.
grunt-contrib-node unit: برای اجرای تست واحد از nodeunit استفاده می‌شود.
grunt-contrib-Sass: برای کامپایل کدهای Sass به css استفاده می‌شود.
grunt-contrib-uglify: برای فشرده کردن فایل‌ها استفاده می‌شود.
grunt-contrib-watch: یک سری فایل‌ها را زیر نظر گرفته و در صورت ایجاد تغییر در کد آن‌ها، یک سری عملیات را انجام می‌دهد.

نصب Grunt و پلاگین‌های آن

برای افزودن Grunt به پروژه باید از دستور npm Install grunt-Save dev استفاده کنید. این دستور نه‌تنها <module> را به‌صورت محلی نصب می‌کند، بلکه آن را به‌طور خودکار به بخش dev Dependencies فایل Package.json اضافه می‌کند. دستور فوق یک فولدر به نام grunt را در فولدر node-module ایجاد خواهد کرد.

نصب پلاگین grunt

سپس نوبت به نصب هرکدام از پلاگین‌های موردنیاز، توسط دستورات Grunt می‌رسد. ترمینال را باز کرده و دستورات زیر را در آن وارد کنید.

npm grunt-contrib-compass-save-dev
npm grunt-contrib-cssmin-save-dev
npm grunt-contrib-jshint-save-dev
npm grunt-contrib-Sass-save-dev
npm grunt-contrib-watch-save-dev
npm grunt-contrib-concat-save-dev
npm grunt-contrib-imagemin-save-dev
npm grunt-contrib-node unit-save-dev
npm grunt-contrib-uglify-save-dev

همان‌طور که در تصویر زیر می‌بینید، تمام این پلاگین‌ها در پوشه node-module قرار گرفته‌اند.

نصب پلاگین grunt

پیکربندی فایل Gruntfile.js

فایل Gruntfile.js یک فایل معتبر جاوا اسکریپت است که در دایرکتوری ریشه پروژه‌ها، در کنار فایل Package.json قرار دارد و باید با پروژه‌مان یکپارچه شود؛ بنابراین فایل را پیکربندی کنیم. برای اینکار کدهای زیر را در فایل Gruntfile.js کپی کنید.

module.exports = function(grunt) {
 
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
 
    compass: {      
    dist: {        
      options: {      
        sassDir: 'sass',
        cssDir: 'css',
        environment: 'production'
      }
    },
    dev: {              
      options: {
        sassDir: 'sass',
        cssDir: 'css'
      }
    }
  },
 
    watch: {
        sass:{
            files: ['sass/*.scss'],
            tasks: ['sass', 'cssmin']
        }
    },
 
    sass: {
        dist: {
            options: {                 
                compass: true,
            },
            files: {
                'css/style.css' : 'sass/style.scss'
            }
        }
    },
 
    concat: {
        options: {
            separator: ';',
            stripBanners: true,
             banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
        },
 
        dist: {
            src: ['js/*.js'],
            dest: 'js/main.min.js'
        }
    },
 
 
    uglify:{
        options: {
            manage: false,
            preserveComments: 'all' //preserve all comments on JS files
        },
        my_target:{
            files: {
                'js/main.min.js' : ['js/*.js']
            }
        }
    },
   
 
    cssmin:{
        my_target:{
            files: [{
                expand: true,
                cwd: 'css/',
                src: ['*.css', '!*.min.css'],
                dest: 'css/',
                ext: '.min.css'
 
            }]
        }
    }
 
  });
 
  // Load the plugin that provides the "compass" task.
  grunt.loadNpmTasks('grunt-contrib-compass');
 
     // Load the plugin that provides the "watch" task.
  grunt.loadNpmTasks('grunt-contrib-watch');
 
     // Load the plugin that provides the "sass" task.
  grunt.loadNpmTasks('grunt-contrib-sass');
 
    // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
 
      // Load the plugin that provides the "concat" task.
  grunt.loadNpmTasks('grunt-contrib-concat');
 
   // Load the plugin that provides the "cssmin" task.
  grunt.loadNpmTasks('grunt-contrib-cssmin');
 
   // Default task(s).
  grunt.registerTask('default', ['uglify','cssmin']);
};

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

۴۳

۴۴

۴۵

۴۶

۴۷

۴۸

۴۹

۵۰

۵۱

۵۲

۵۳

۵۴

۵۵

۵۶

۵۷

۵۸

۵۹

۶۰

۶۱

۶۲

۶۳

۶۴

۶۵

۶۶

۶۷

۶۸

۶۹

۷۰

۷۱

۷۲

۷۳

۷۴

۷۵

۷۶

۷۷

۷۸

۷۹

۸۰

۸۱

۸۲

۸۳

۸۴

۸۵

۸۶

۸۷

۸۸

۸۹

۹۰

۹۱

۹۲

۹۳

۹۴

۹۵

۹۶

۹۷

۹۸

۹۹

۱۰۰

۱۰۱

۱۰۲

۱۰۳

module.exports = function(grunt) {

// Project configuration.

grunt.initConfig({

pkg: grunt.file.readJSON('package.json'),

compass: {

dist: {

options: {

sassDir: 'sass',

cssDir: 'css',

environment: 'production'

}

dev: {

options: {

sassDir: 'sass',

cssDir: 'css'

}

watch: {

sass:{

files: ['sass/*.scss'],

tasks: ['sass', 'cssmin']

}

sass: {

dist: {

options: {

compass: true,

files: {

'css/style.css' : 'sass/style.scss'

}

concat: {

options: {

separator: ';',

stripBanners: true,

banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'

dist: {

src: ['js/*.js'],

dest: 'js/main.min.js'

}

uglify:{

options: {

manage: false,

preserveComments: 'all' //preserve all comments on JS files

my_target:{

files: {

'js/main.min.js' : ['js/*.js']

}

cssmin:{

my_target:{

files: [{

expand: true,

cwd: 'css/',

src: ['*.css', '!*.min.css'],

dest: 'css/',

ext: '.min.css'

}]

}

});

// Load the plugin that provides the "compass" task.

grunt.loadNpmTasks('grunt-contrib-compass');

// Load the plugin that provides the "watch" task.

grunt.loadNpmTasks('grunt-contrib-watch');

// Load the plugin that provides the "sass" task.

grunt.loadNpmTasks('grunt-contrib-sass');

// Load the plugin that provides the "uglify" task.

grunt.loadNpmTasks('grunt-contrib-uglify');

// Load the plugin that provides the "concat" task.

grunt.loadNpmTasks('grunt-contrib-concat');

// Load the plugin that provides the "cssmin" task.

grunt.loadNpmTasks('grunt-contrib-cssmin');

// Default task(s).

grunt.registerTask('default', ['uglify','cssmin']);

};

Module. exports=function(grunt) یک متد برای فراخوان Grunt است. همچنین

Grunt.file.readJSON(1Package.json) متادیتاهای ذخیره شده در Package.json را وارد فایل پیکربندی Grunt می‌کند.

رشته قالب‌بندی >٪ ٪< برای مشخص کردن هر نوع پروپرتی یا داده‌های پیکربندی مانند file Paths و لیست فایل‌ها استفاده می‌شود و این کار باعث کاهش حجم کدنویسی خواهد شد.

فشرده کردن css

کد زیر مربوط به بخش پیکربندی پلاگین css min است. سه گزینه در اینجا وجود دارد که باید به آن‌ها نگاهی بیندازیم:

Src، dest و ext قسمت src شامل فایل‌هایی با فرمت *.css است و معنی آن این است که تمام فایل‌ها را انتخاب کرده و آن‌ها را با استفاده از پسوند min.css فشرده کند و در فولدر css که در قسمت dist مشخص شده ذخیره کند.

شما می‌توانید تنها فایل‌هایی که نیاز است فشرده شوند را انتخاب کنید.

cssmin:{
     my_target:{
         files: [{
             expand: true,
             cwd: 'css/',
             src: ['*.css', '!*.min.css'],
             dest: 'css/',
             ext: '.min.css'
 
         }]
     }
 }

۱۰

۱۱

۱۲

cssmin:{

my_target:{

files: [{

expand: true,

cwd: 'css/',

src: ['*.css', '!*.min.css'],

dest: 'css/',

ext: '.min.css'

}]

}

سپس پلاگین grunt.loadNPMTasks(grunt-contrib-.cssmin) را لود می‌کنیم.

برای اجرای این عملیات کافی است از دستور grunt cssmin در ترمینال استفاده کنیم.

فشرده کردن فایل‌های جاوا اسکریپت

کدهای زیر بخش پیکربندی پلاگین uglify-js را نشان می‌دهد. به بخش my-target که پیکربندی فایل در آنجا انجام می‌شود، دقت کنید. گزینه اول قبل از colon(:) نام فایل خروجی فشرده شده همراه با دایرکتوری آن است؛ اما قسمت دوم که در یک براکت قرار گرفته، لیست تمام فایل‌های جاواسکریپتی است که در یک فایل به نام main.min.js فشرده می‌شوند. ستاره (*) به معنی همه است.

مانند پلاگین mincss شما می‌توانید یک فایل مشخص را برای فشرده‌سازی انتخاب کنید و برای این کار به‌جای علامت ستاره، باید نام آن فایل را وارد کنید.

uglify:{
        options: {
            manage: false,
            preserveComments: 'all' //preserve all comments on JS files
        },
        my_target:{
            files: {
                'js/main.min.js' : ['js/*.js']
            }
        }
    }

۱۰

۱۱

uglify:{

options: {

manage: false,

preserveComments: 'all' //preserve all comments on JS files

my_target:{

files: {

'js/main.min.js' : ['js/*.js']

}

Grunt-loadNPMTasks(‘grunt-contrib-uglify’) را به‌منظور بارگذاری عملیات، لود می‌کنیم. برای اجرای این عملیات از دستور grunt uglify در ترمینال استفاده می‌کنیم. با اجرای دستور بالا، فایل فشرده شده در مسیری که در بخش my-target مشخص کردید، قرار می‌گیرد.

Default Task

برای مشخص کردن Default Task باید از دستور grunt.registerTask(‘default’,[‘1] استفاده کنید. هر زمان که Grunt اجرا شود، عملیاتی که در قسمت آرایه دستور فوق مشخص کرده‌اید، اجرا می‌شود.

در این مثال ما از grunt.regesterTask(‘default’,[‘uglify’,’cssmin’]) استفاده کردیم که به معنی این است که هر بار ما دستور grunt را در ترمینال وارد کردیم، به‌طور خودکار عملیات مربوط به پلاگین‌های cssmin, uglify اجرا می‌شود.

نتیجه‌گیری

در این مقاله درباره تنظیمات npm و grunt.js صحبت کردیم. امیدواریم این مقاله ایده‌هایی درباره نحوه استفاده از grunt برای سرعت بخشیدن به فرآیند توسعه پروژه‌های شما داده باشد. در مقاله بعدی، مطالب بیشتری راجع به دستورات و پلاگین‌های grunt همراه با یک تم بوت استرپ ۴ بیان می‌کنیم. همچنین درباره نحوه استفاده از Compass و Sass برای تبدیل فایل‌های Scss به یک فایل css مطالبی را ارائه می‌کنیم. اگر می‌خواهید ایده‌های بیشتری را درباره نحوه استفاده از Grunt به دست آورید، به مستندات رسمی آن مراجعه کنید.

منبع designmodo.com

پربازدید‌ترین‌های ماه