آموزش استفاده از npm به عنوان یک Build tool در پروژه

در این مطلب میخوام بهتون آموزش بدم که چطور میتونین از npm به عنوان یک build tool استفاده کنید و بیشتر کارهاتون رو با اون بصورت اتوماتیک در بیارید.

ابزارهایی برای Build در سالهای قبل در بورس بودند که بیشتر کارهای Front-end رو با استفاده از اونا مدیریت میکردیم و معروفترین اونا Grunt و Gulp و Broccoli بودند. این ابزارها هر کاری که در یک پروژه نیاز هست که به دفعات زیاد بصورت تکراری انجام بشن رو مدیریت میکنن و بصورت اتوماتیک براتون انجام میدن.

مثلا اگر بخواید فایلها فشرده بشن و به هم متصل بشن و یا اینکه تست‌های مورد نظرتون اجرا بشه و کدهاتون کامپایل بشن و ... این ابزارها به کمک شما میان و خیلی کارتون رو راحت‌تر میکنن. اما سوال اینجا هست که واقعا به اونا احتیاج داریم؟ واقعا نیازه که برای مدیریت کردن کارهای این چنینی یک پیش‌نیاز دیگه مثل Gulp رو به پروژمون اضافه کنیم و کار با اون رو یاد بگیریم؟ جواب این سوال نه هست.

یک جایگزین ساده و رایگان در اختیارتون قرار داده شده و اون هم npm هست که همون موقع که Nodejs رو در سیستم نصب میکنید، به همراه اون نصب میشه.

در این مقاله بهتون یاد میدیم که چگونه میتونیم از npm به عنوان یک build tool استفاده کنیم و چه قابلیت‌هایی رو در اختیار ما قرار میده.

npm scripts یا اسکریپتهای npm

برای شروع کار یک دایرکتوری بنام buildtool در Desktop به وجود میارم و دستور npm init -y رو در command line اجرا میکنم تا فایل package.json در دایرکتوری مذکور ساخته شده و قرار بگیره. حالا محتویات package.json رو بصورت کامل پاک کنید و کدهای زیر رو بجای اونا قرار بدین:

{
  "name": "buildtool",
  "version": "1.0.0",
  "description": "npm as a build tool",
  "scripts": {
    "info": "echo 'npm as a build tool'"
  },
}

همونطور که در کدهای بالا میبینید، یک شئ scripts وجود داره که در اون یک ویژگی info قرار داده شده و دستوراتی در مقابل اون قرار گرفته است. مقادیری که در مقابل ویژگی info قرار میگیرن، در shell به عنوان یک دستور اجرا خواهند شد. با اجرای دستور npm run میتونیم همه script‌های که موجود رو مشاهده کنیم. مثلا اگر در همین پروژه این دستور رو اجرا کنیم، خروجی بصورت زیر خواهد بود:

Scripts available in buildtool via `npm run-script`:
  info
    echo 'npm as a build tool'

در مواقعی که شما میخواید یک script رو فراخوانی و اجرا کنید، باید نام اون script رو در مقابل npm run قرار داده و اون رو اجرا کنید. مثلا برای اینکه بتونیم اسکریپت info رو که در package.json بالا تعریف شده اجرا کنیم، بصورت npm run info عمل میکنیم. خروجی بصورت زیر خواهد بود:

میبینید که متن مورد نظری که در مقابل دستور echo قرار داده بودیم، چاپ شده است. اگر بخواید فقط خروجی info رو مشاهده کنید و بقیه خروجی‌های اضافی رو نبینید، میتونین از حالت سکوت استفاده کنید. برای اینکار از -s استفاده میکنیم. بصورت زیر:

تا اینجای کار فقط از یک echo ساده در اسکریپتها استفاده کردیم و دیدیم که چقد استفاده از اون راحته. هر چیزی که در command line قابل انجام باشه رو میتونیم در npm script مورد استفاده قرار بدیم و خیلی دستمون باز هست. حالا میخوایم بعضی از کارهای متداولی که وجود داره رو با هم بررسی کنیم و ببینیم که npm چطور میتونه اونا رو مدیریت کنه.

فشرده‌سازی کدها

فرض کنید که در پروژه فایلهای CSS و Javascript وجود دارند و حالا میخوایم اونا رو بصورت Minify در بیاریم. خب در ابتدا برای فشرده‌سازی فایلهای Javascript بسته UglifyJS2 رو نصب میکنیم. برای اینکار دستور npm install uglify-js --save-dev رو در command line اجرا میکنیم. حالا یک اسکریپت جدید بنام minify:js رو به وجود میارم و دستورات زیر رو برای اون قرار میدم:

{
  "name": "buildtool",
  "version": "1.0.0",
  "description": "npm as a build tool",
  "devDependencies": {
    "uglify-js": "^3.4.9"
  },
  "scripts": {
    "info": "echo 'npm as a build tool'",
    "minify:js": "uglifyjs src/js/main.js -o dist/js/main.min.js"
  }
}

همونطور که میبینید نام فایل مورد نظر رو بعد از uglifyjs قرار داده و بعد از -o یا output هم مسیر خروجی فایل فشرده شده رو مشخص کردیم. حالا اگر دستور npm run minify:js رو اجرا کنیم، فایل فشرده مورد نظر ساخته میشه و میتونیم از اون استفاده کنیم.

برای فشرده‌سازی فایلهای CSS هم به همین صورت عمل میکنیم. در ابتدا ابزار مربوط به فشرده‌سازی CSS رو نصب میکنیم. برای اینکار دستور npm install --save-dev clean-css clean-css-cli رو اجرا میکنم و اسکریپت minify:css رو به scripts اضافه میکنیم. بصورت زیر:

{
  "name": "buildtool",
  "version": "1.0.0",
  "description": "npm as a build tool",
  "devDependencies": {
    "clean-css": "^4.2.1",
    "clean-css-cli": "^4.2.1",
    "uglify-js": "^3.4.9"
  },
  "scripts": {
    "info": "echo 'npm as a build tool'",
    "minify:js": "uglifyjs src/js/main.js -o dist/js/main.min.js",
    "minify:css": "cleancss src/css/style.css -o dist/css/styles.min.css"
  }
}

حالا اگر دستور npm run minify:css رو اجرا کنید، فایل CSS مورد نظرتون فشرده‌سازی میشه و در مسیر مورد نظر قرار میگیره.

هوک‌های Post و Pre

npm قابلیتی رو در اختیارتون قرار داده که میتونین قبل یا بعد از اجرا شدن یک دستور، دستورات دیگری رو بصورت اتوماتیک اجرا کنید. برای اینکار از pre و post استفاده میشه. مثلا در کدهای بالا اگر دو اسکریپت دیگر با نامهای preinfo و postinfo تعریف کنیم، قبل از اجرا شدن info، در ابتدا preinfo اجرا میشه و بعد از اون هم postinfo اجرا میشه و اجرای دستورات ادامه پیدا میکنه. کدهای زیر رو ببینید:

حالا اگر دستور info رو مجددا اجرا کنید، خروجی بصورت زیر خواهد بود:

اسکریپت build

ما در بالا فقط در مورد Minify کردن توضیح دادیم و چیزهای دیگری نظیر Linting و Testing و Watching و Live reloading و ... وجود دارند که در کنار یکدیگر یک workflow رو به وجود میارند. فرض کنید که در همین مثال ساده که فقط از minify استفاده شده است، بخوایم اسکریپت build رو به وجود بیاریم. برای اینکار بصورت زیر عمل میکنیم:

{
  "name": "buildtool",
  "version": "1.0.0",
  "description": "npm as a build tool",
  "devDependencies": {
    "clean-css": "^4.2.1",
    "clean-css-cli": "^4.2.1",
    "uglify-js": "^3.4.9"
  },
  "scripts": {
    "preinfo": "echo 'pre info'",
    "info": "echo 'npm as a build tool'",
    "postinfo": "echo 'post info'",
    "minify:js": "uglifyjs src/js/main.js -o dist/js/main.min.js",
    "minify:css": "cleancss src/css/style.css -o dist/css/styles.min.css",
    "build": "npm run info && npm run minify:js && npm run minify:css"
  }
}

همونطور که میبینید در مقابل دستور build، دستورات مختلفی قرار داده شده‌اند و با استفاده از && از هم جدا شدند. در ابتدا info و بعد از اون هم minify:js و minify:css اجرا میشن. پس میبینید که میتونین از اسکریپتهای npm در دیگر اسکریپتها نیز استفاده کنید و با استفاده از این قابلیتها میتونین تقریبا هر کاری که بخواید رو بصورت اتوماتیک انجام بدین.

برای اجرا کردن build هم میتونین npm run build رو در command line اجرا کنید.

این کارها فقط یکبار انجام میشه و دیگه همیشه راحت هستید و با اجرا کردن یک دستور همه کارها برای شما مثل آب خوردن انجام میشه.

نویسنده

محمد اسفندیاری

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.