تخفیف ویژه

آموزش استفاده از Grunt برای مدیریت وظایف تکراری - Grunt (جلسه 4) - نصب Grunt - قسمت 2

دسته بندی: آموزش
زمان مطالعه: 7 دقیقه
۰۴ مرداد ۱۳۹۵

در این مطلب با ادامه آموزش Grunt در خدمتتون هستیم.

grund

در جلسه قبل پوشه بندی پروژمون رو درست کردیم و به عنوان قدم اول، grunt-cli رو بر روی سیستم خودمون بصورت global نصب کردیم. بعد از اون با استفاده از دستور npm init در cmd، پروژه خودمون رو تعریف کردیم و نام و نسخه و دیگر ویژگی‌های اون رو قرار دادیم. با انجام اینکار یک فایل package.json درست شد و در ریشه پروژمون قرار گرفت و اطلاعات پروژه رو در خودش قرار داد.

در همین ابتدا باید یه موضوعی رو برای شما روشن کنم. ببینید هر package یا بسته که برای یک پروژه مورد نیاز هست رو بهش Dependency میگن. یعنی پروژه ما برای کارکرد درست به اون بسته نیازمنده. حالا این Dependency‌ها خودشون دو مدل هستن. یکی نیازمندی هایی هستند که حتما برای کار کردن پروژه باید حضور داشته باشن و همه باید از اونا استفاده کنن. مدل دیگه Developer dependency هست و این مدل به معنای اون هست که فقط کسانی که میخان این پروژه رو توسعه بدن و تغییراتی در اون بوجود بیارن، باید این بسته‌ها رو نصب کنن و تا این موارد نصب نباشه، نمیشه تغییری در پروژه بوجود آورد.

این موارد رو باید در فایل package.json مشخص کنید و بگید که هر بسته در چه دسته ای قرار میگیره. با اینکار اگه یه نفر دیگه خواست از پروژه شما استفاده کنه، فایلهای مورد نظر رو میگیره و بعد از اون با زدن دستور npm install بسته هایی که برای اون پروژه لازمه براش نصب میشه. این مواردی که دارم عرض میکنم خیلی خیلی در Github کاربرد داره و چونکه خیلی از افراد دارن روی یه پروژه کار میکنن، با استفاده از همین قاعده میان و مدیریت پروژه رو بهتر میکنن. برای مثال اگر بخوام بهتر براتون توضیح بدم، پروژه Foundation Zurb رو در Github ببینید. همونطور که میدونید این پروژه یک فریم ورک واکنشگرا کردن پیشرفته هست که محبوبیت بالایی هم داره و همین الان که دارم این مطلب رو مینویسم 23751 نفر اون رو Star کردن. اگر در صفحه مورد نظر نگاه کنید، فایلهای زیادی وجود داره که یکی از اصلی‌ترین اونها package.json هست:foundation package json

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

{
  "name": "foundation-sites",
  "version": "6.2.3",
  "main": "dist/foundation.js",
  "description": "The most advanced responsive front-end framework in the world.",
  "author": "ZURB <[email protected]> (http://foundation.zurb.com)",
  "homepage": "http://foundation.zurb.com/sites",
  "scripts": {
    "start": "gulp",
    "test": "npm run test:sass && npm run test:javascript",
    "test:sass": "mocha test/sass/test_sass.js",
    "test:javascript": "gulp sass:foundation && gulp test:transpile-js && mocha-phantomjs test/javascript/index.html",
    "test:visual": "gulp test",
    "deploy": "gulp deploy",
    "deploy:prep": "gulp deploy:prep",
    "deploy:docs": "gulp deploy:docs"
  },
  "dependencies": {
    "jquery": "^2.2.0",
    "what-input": "^2.0.0"
  },
  "license": "MIT",
  "devDependencies": {
    "array-uniq": "^1.0.2",
    "babel-core": "^6.3.26",
    "babel-eslint": "^5.0.0",
    "babel-plugin-transform-es2015-arrow-functions": "^6.3.13",
    "babel-plugin-transform-es2015-block-scoped-functions": "^6.3.13",
    "babel-plugin-transform-es2015-block-scoping": "^6.4.0",
    "babel-plugin-transform-es2015-classes": "^6.3.15",
    "babel-plugin-transform-es2015-destructuring": "^6.3.15",
    "babel-plugin-transform-es2015-parameters": "^6.3.26",
    "babel-plugin-transform-es2015-shorthand-properties": "^6.5.0",
    "babel-plugin-transform-es2015-spread": "^6.4.0",
    "babel-plugin-transform-es2015-template-literals": "^6.3.13",
    "browser-sync": "^2.8.2",
    "chai-jquery": "^2.0.0",
    "chalk": "^1.1.1",
    "clipboard": "^1.5.5",
    "corejs-typeahead": "corejavascript/typeahead.js",
    "foundation-docs": "zurb/foundation-docs",
    "gulp": "^3.8.10",
    "gulp-add-src": "^0.2.0",
    "gulp-autoprefixer": "^2.3.1",
    "gulp-babel": "^6.1.1",
    "gulp-cache-bust": "^1.0.2",
    "gulp-concat": "^2.4.3",
    "gulp-cssnano": "^2.1.0",
    "gulp-eslint": "^2.0.0",
    "gulp-filter": "^3.0.1",
    "gulp-if": "^2.0.0",
    "gulp-load-plugins": "^1.2.0",
    "gulp-mocha": "^2.2.0",
    "gulp-newer": "^1.1.0",
    "gulp-plumber": "^1.0.1",
    "gulp-prompt": "^0.1.2",
    "gulp-rename": "^1.2.2",
    "gulp-replace": "^0.5.4",
    "gulp-rsync": "0.0.5",
    "gulp-ruby-sass": "^2.0.6",
    "gulp-sass": "^2.1.0",
    "gulp-scss-lint": "^0.3.9",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^1.1.0",
    "gulp-zip": "^3.2.0",
    "inquirer": "^0.11.4",
    "is-empty-object": "^1.1.1",
    "js-yaml": "^3.5.4",
    "mocha": "^2.3.3",
    "mocha-phantomjs": "^4.0.2",
    "motion-ui": "^1.1.0",
    "multiline": "^1.0.2",
    "octophant": "^1.0.0",
    "opener": "^1.4.1",
    "panini": "^1.3.0",
    "parker": "0.0.9",
    "prettyjson": "^1.1.3",
    "require-dir": "^0.3.0",
    "rimraf": "^2.3.2",
    "run-sequence": "^1.1.4",
    "sass-true": "^2.0.3",
    "sinon": "^1.17.3",
    "supercollider": "^1.4.0",
    "touch": "^1.0.0",
    "vinyl": "^1.1.1",
    "vinyl-source-stream": "^1.1.0",
    "yargs": "^4.2.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/zurb/foundation-sites"
  },
  "bugs": {
    "url": "https://github.com/zurb/foundation-sites/issues",
    "email": "[email protected]"
  },
  "keywords": [
    "handlebars-helper-rel",
    "handlebars-helper-slugify"
  ],
  "eyeglass": {
    "name": "foundation",
    "sassDir": "scss",
    "needs": "^0.8.0"
  },
  "jspm": {
    "format": "global",
    "shim": {
      "dist/foundation": {
        "deps": [
          "jquery"
        ]
      }
    }
  }
}

همونطور که دیدید کدهایی شبیه به کدهای package.json خودمون درونش هست ولی کمی بیشتر و پیچیده تر.

ما در اینجا این کدها رو قرار دادیم تا دو مفهوم dependencies و devDependencies رو به شما نشون بدیم. dev مخفف همون developer یا توسعه دهنده هست. در بالا dependencies بصورت زیر هست:

"dependencies": {
	"jquery": "^2.2.0",
	"what-input": "^2.0.0"
}

همونطور که میبینید دو package یا بسته jquery و what-input بعنوان بسته‌های مورد نیاز پروژه تعریف شدن. همونطور که میبینید در جلوی هر بسته ورژن یا نسخه مورد نظر قرار داده شده.

در کد بالا devDependencies بصورت زیر هست:

"devDependencies": {
	"array-uniq": "^1.0.2",
	"babel-core": "^6.3.26",
	"babel-eslint": "^5.0.0",
	"babel-plugin-transform-es2015-arrow-functions": "^6.3.13",
	"babel-plugin-transform-es2015-block-scoped-functions": "^6.3.13",
	"babel-plugin-transform-es2015-block-scoping": "^6.4.0",
	"babel-plugin-transform-es2015-classes": "^6.3.15",
	"babel-plugin-transform-es2015-destructuring": "^6.3.15",
	"babel-plugin-transform-es2015-parameters": "^6.3.26",
	"babel-plugin-transform-es2015-shorthand-properties": "^6.5.0",
	"babel-plugin-transform-es2015-spread": "^6.4.0",
	"babel-plugin-transform-es2015-template-literals": "^6.3.13",
	"browser-sync": "^2.8.2",
	"chai-jquery": "^2.0.0",
	"chalk": "^1.1.1",
	"clipboard": "^1.5.5",
	"corejs-typeahead": "corejavascript/typeahead.js",
	"foundation-docs": "zurb/foundation-docs",
	"gulp": "^3.8.10",
	"gulp-add-src": "^0.2.0",
	"gulp-autoprefixer": "^2.3.1",
	"gulp-babel": "^6.1.1",
	"gulp-cache-bust": "^1.0.2",
	"gulp-concat": "^2.4.3",
	"gulp-cssnano": "^2.1.0",
	"gulp-eslint": "^2.0.0",
	"gulp-filter": "^3.0.1",
	"gulp-if": "^2.0.0",
	"gulp-load-plugins": "^1.2.0",
	"gulp-mocha": "^2.2.0",
	"gulp-newer": "^1.1.0",
	"gulp-plumber": "^1.0.1",
	"gulp-prompt": "^0.1.2",
	"gulp-rename": "^1.2.2",
	"gulp-replace": "^0.5.4",
	"gulp-rsync": "0.0.5",
	"gulp-ruby-sass": "^2.0.6",
	"gulp-sass": "^2.1.0",
	"gulp-scss-lint": "^0.3.9",
	"gulp-sourcemaps": "^1.6.0",
	"gulp-uglify": "^1.1.0",
	"gulp-zip": "^3.2.0",
	"inquirer": "^0.11.4",
	"is-empty-object": "^1.1.1",
	"js-yaml": "^3.5.4",
	"mocha": "^2.3.3",
	"mocha-phantomjs": "^4.0.2",
	"motion-ui": "^1.1.0",
	"multiline": "^1.0.2",
	"octophant": "^1.0.0",
	"opener": "^1.4.1",
	"panini": "^1.3.0",
	"parker": "0.0.9",
	"prettyjson": "^1.1.3",
	"require-dir": "^0.3.0",
	"rimraf": "^2.3.2",
	"run-sequence": "^1.1.4",
	"sass-true": "^2.0.3",
	"sinon": "^1.17.3",
	"supercollider": "^1.4.0",
	"touch": "^1.0.0",
	"vinyl": "^1.1.1",
	"vinyl-source-stream": "^1.1.0",
	"yargs": "^4.2.0"
}

همونطور که دیدید package یا بسته‌های زیادی برای devDependencies قرار داده شدن و نشون میده که کسی که بخواد پروژه عظیم foundation رو توسعه بده، باید همه این بسته‌ها رو نصب کنه. با این کار زمانی که cmd رو به ریشه این پروژه بردید، عبارت npm install رو بزنید. npm بصورت اتوماتیک همه بسته‌ها رو، چه devDependencies و چه dependencies دریافت کرده و نصب میکنه. حالا اگر شما قصدتون این نباشه که foundation رو توسعه بدید و صرفا میخاید از اون استفاده کنید با زدن دستور زیر، فقط بسته هایی که در dependencies هستن رو نصب کنید و لازم نیس بسته‌های حجیم دیگه رو هم دانلود کنید:

npm install --only=production

بهمین سادگی فقط همون دو بسته jquery و what-input نصب میشه. شاید این بحث‌ها در ابتدا کمی شما رو گیج کنه ولی همینجور که جلو بریم بیشتر با کم و کیف قضیه آشنا خواهید شد.

در جلسات بعدی بیشتر در مورد Grunt صحبت میکنیم.

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

موفق باشید

یا علی

Source

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

جلسات دوره

نظرات کاربران

ervin

سلام
امکان اموزش github هم هست!؟ اخه یه خورده پیچیده هست

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

اگر کاربران زیادی خواهان این موضوع باشن بله هست

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.