workflow طراحی مدرن با استفاﺩﻩ اﺯ gulpjs

16
Workflow ا ب ی مدرن ح را طﺯﺯ اﺯ ا ف ت س اGulpJS

Upload: web-standards-school

Post on 13-Apr-2017

209 views

Category:

Technology


4 download

TRANSCRIPT

Page 1: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs

Workflow طراحی مدرن باGulpJSاستفاده از

Page 2: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs

ها احتیاج داریم؟build toolچرا به

Page 3: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs

Gulpچیست؟

بنا شده است.node.js است که برپایه buildگالپ یک سیستم

Page 4: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs

؟Gulpچرا

Page 5: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs
Page 6: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs
Page 7: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs

nodeنصب

https://nodejs.org/en/

Page 8: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs

HTTPتغییر پروتوکل به

npm config set registry http://registry.npmjs.org/

Page 9: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs

Gulpنصب

npm install -g gulp

Page 10: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs

package.jsonایجاد فایل

npm init

Page 11: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs

ذخیره می شوندgulpfile.jsتمامی تسک ها داخل فایل

Page 12: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs

local به شکل Gulpنصب npm install gulp --save-dev

Page 13: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs

gulp-ruby-sassنصب

npm install gulp-ruby-sass --save-dev

Page 14: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs

gulp جدید در taskتعریف

gulp.task(name, function() { return gulp.src(path) .pipe(plugin) .pipe(plugin) .pipe(gulp.dest(path));});

Page 15: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs

gulp-autoprefixerنصب

npm install gulp-autoprefixer --save-dev

Page 16: Workflow طراحی مدرن با استفاﺩﻩ اﺯ Gulpjs

browserSyncنصب

npm install browser-sync --save-dev