workflow طراحی مدرن با استفاﺩﻩ اﺯ gulpjs
TRANSCRIPT
![Page 1: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs](https://reader035.vdocuments.pub/reader035/viewer/2022062311/589d7da71a28ab69538b63d1/html5/thumbnails/1.jpg)
Workflow طراحی مدرن باGulpJSاستفاده از
![Page 2: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs](https://reader035.vdocuments.pub/reader035/viewer/2022062311/589d7da71a28ab69538b63d1/html5/thumbnails/2.jpg)
ها احتیاج داریم؟build toolچرا به
![Page 3: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs](https://reader035.vdocuments.pub/reader035/viewer/2022062311/589d7da71a28ab69538b63d1/html5/thumbnails/3.jpg)
Gulpچیست؟
بنا شده است.node.js است که برپایه buildگالپ یک سیستم
![Page 4: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs](https://reader035.vdocuments.pub/reader035/viewer/2022062311/589d7da71a28ab69538b63d1/html5/thumbnails/4.jpg)
؟Gulpچرا
![Page 5: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs](https://reader035.vdocuments.pub/reader035/viewer/2022062311/589d7da71a28ab69538b63d1/html5/thumbnails/5.jpg)
![Page 6: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs](https://reader035.vdocuments.pub/reader035/viewer/2022062311/589d7da71a28ab69538b63d1/html5/thumbnails/6.jpg)
![Page 7: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs](https://reader035.vdocuments.pub/reader035/viewer/2022062311/589d7da71a28ab69538b63d1/html5/thumbnails/7.jpg)
nodeنصب
https://nodejs.org/en/
![Page 8: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs](https://reader035.vdocuments.pub/reader035/viewer/2022062311/589d7da71a28ab69538b63d1/html5/thumbnails/8.jpg)
HTTPتغییر پروتوکل به
npm config set registry http://registry.npmjs.org/
![Page 9: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs](https://reader035.vdocuments.pub/reader035/viewer/2022062311/589d7da71a28ab69538b63d1/html5/thumbnails/9.jpg)
Gulpنصب
npm install -g gulp
![Page 10: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs](https://reader035.vdocuments.pub/reader035/viewer/2022062311/589d7da71a28ab69538b63d1/html5/thumbnails/10.jpg)
package.jsonایجاد فایل
npm init
![Page 11: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs](https://reader035.vdocuments.pub/reader035/viewer/2022062311/589d7da71a28ab69538b63d1/html5/thumbnails/11.jpg)
ذخیره می شوندgulpfile.jsتمامی تسک ها داخل فایل
![Page 12: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs](https://reader035.vdocuments.pub/reader035/viewer/2022062311/589d7da71a28ab69538b63d1/html5/thumbnails/12.jpg)
local به شکل Gulpنصب npm install gulp --save-dev
![Page 13: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs](https://reader035.vdocuments.pub/reader035/viewer/2022062311/589d7da71a28ab69538b63d1/html5/thumbnails/13.jpg)
gulp-ruby-sassنصب
npm install gulp-ruby-sass --save-dev
![Page 14: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs](https://reader035.vdocuments.pub/reader035/viewer/2022062311/589d7da71a28ab69538b63d1/html5/thumbnails/14.jpg)
gulp جدید در taskتعریف
gulp.task(name, function() { return gulp.src(path) .pipe(plugin) .pipe(plugin) .pipe(gulp.dest(path));});
![Page 15: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs](https://reader035.vdocuments.pub/reader035/viewer/2022062311/589d7da71a28ab69538b63d1/html5/thumbnails/15.jpg)
gulp-autoprefixerنصب
npm install gulp-autoprefixer --save-dev
![Page 16: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs](https://reader035.vdocuments.pub/reader035/viewer/2022062311/589d7da71a28ab69538b63d1/html5/thumbnails/16.jpg)
browserSyncنصب
npm install browser-sync --save-dev