Gentleman set front-end Developer

Nem titok, hogy a modern front-end fejlesztő kell a fegyvert az egyik az eszközöket építeni projektek, mint a Culp vagy Grunt. Amíg egy ideig Grunt tartott monopólium ebben a kérdésben, de attól elkülönítve Grunt fejlesztőcsapat úgy döntött, hogy létrehoz egy könnyű és gyors feladat-manager Gulp.

Ebben a cikkben fogunk készíteni a semmiből kezdőcsomag alkalmazásra a jövőbeni projektek.

Amit használt technológiák

• Szoftver platform: node.js
• CSS előfeldolgozón: Stylus
• Task Manager: Culp

Miért frontenderu feladat-manager

Egészen a közelmúltig, azt kérdeztem magamtól a kérdést, hogy miért van szükségem, hogy időt tölteni beállítás config Feladatkezelő, ha már megbirkózik bevezetését elrendezés, én még nem kezdték használni CSS előfeldolgozón.

CSS előfeldolgozón - tényleg kényelmesebb és gyorsabb írási stílus, de összeállítása kódot írt a pre-processzor normál CSS, nem éppen egyszerű feladat, amelyet megoldani egy gombnyomással. Itt aztán jön a mentő és a feladat-menedzser. Átalakítani a kód nem valami kattintani, minden úgy történik, internetes Ön felügyelete nélkül (persze, ha konfigurálni jobbra).

Szükségtelen a feladat Feladatkezelő messze túlmutat az összefüggő folyamatok kódkonverzió a pre-processzor tiszta CSS. projektek kollektor is részt minification, összefűzés, hibaellenőrző kódot, a szerelvény grafikus elemeket, optimalizálja a képeket az interneten, stb Egyszerűen létre a projekt sok logikailag tagolt fájlokat, amelyeket aztán kényelmesen gyűjteni egy könyvtár már feldolgozott és készen áll a böngészést. De erről bővebben később, de most indul előkészítése.

telepítése node.js

Ha tudod, hogyan kell telepíteni node.js a rendszerben, és használja azt, akkor nyugodtan lépni a következő címre.

Szeretném figyelmeztetni, hogy mindezek a lépések fontosak a Mac OS X, de általában alkalmazható más Unix rendszereken. Fejlesztés révén a Feladatkezelő és a parancssor Windows valamivel nehezebb, és akkor nem lehet leírni. Azonban, ha még mindig a Windows, és nem kész arra, hogy adja fel, én is lehetőséget biztosítunk egy virtuális gép telepített Ubuntu. Én ezt az opciót a honi rendszer, amely általában elég kényelmes.

Tehát az első dolog, amit meg kell tölteni és telepíteni node.js csomagot, hogy a rendszer működjön együtt a csomópontot a konzol. Tovább a hivatalos honlapján node.js és töltse le a legfrissebb stabil verzió a rendszer. Telepítés után a parancssor legyen parancs csomópont elérhető. Annak ellenőrzésére, hogy a csomópont fut, írja be a parancssor

válaszként változata jelenjen meg beállítani node.js. Ha minden rendben van, megy előre.

A szerkezet a projekt könyvtár

A mi projektek használjuk egységes változata a szerkezet:

A konzol segítségével a cd paranccsal módosíthatja a gyökér fejlődését könyvtárban hozzon létre egy könyvtárat a projektünk mkdir start és megy bele.

Mi létre a struktúrát a projekt révén a konzol:

mkdir építmények erőforrás src src / css src / css / images src / css / sprite src / css / részleges src / css / vendor src / js src / template src / template / include src / img src / fonts

Hozzunk létre az eredeti fájlokat a projekt szerkezete:

érintse gulpfile.js stylus.template.mustache .gitignore src / .htaccess src / TODO src / CSS / styles.styl src / CSS / részleges / styles.styl src / CSS / részleges / mixins.styl src / js / main.js src / js / _main.js src / sablon / pages.html src / sablon / index.html src / sablon / include / header.html src / sablon / include / footer.html

hozzon létre egy package.json

Minden kérdés is felbukkan keresztül proschelkal Enter, csomópont állítsa őket alapértelmezett, vagy töltse ki a mezőket.

.gitignore

Gita megmondani, hogy mi a könyvtárakat kívül hagyni, és nem, hogy töltse ki a tárolóba:

Katalógus node_modules később jelennek meg a telepítés után a plug-inek és tartalmazni fogja az összes projekt csomópontot-inek.

src / .htaccess

Állítsa további kiszolgáló gzip tömörítés és a cache:

src / CSS / styles.styl

Az egyéni stílus fájlokat a fő stílusok fájlba:

Felhívjuk figyelmét, hogy ahhoz, hogy csatlakozni .styl fájl kiterjesztését nincs megadva szerint a szemantika a kódot előfeldolgozón Stylus. Ahhoz, hogy csatlakozzon egy másik mellék stílusok, mint például Css, jelezve az utóbbi van szükség.

Ez az oldal tartalmaz Teendőlista fejlődését. További információ a dolgozó ezt a fájlt el tudja olvasni oldalon PlainTasks plugin Sublime szöveg.

A telepítési struktúra befejeződött.

Telepítése plug-inek a csomagkezelő NPM

Node.js alapértelmezés szerint tartalmazza a csomagkezelő NPM. adattárak, hogy összegyűjtött egy csomó plug-inek, amellyel vagyunk dolgozni.

Telepítse a bővítmény Nyelő

Először meg kell telepíteni Culp globálisan (kulccsal -g) A rendszer

NPM telepíteni korty -g

Ezt egyszer kell elvégezni. további globális beállítás nem szükséges.

Most meg kell telepíteni Culp helyileg a projekt könyvtárában

NPM telepíteni korty --save-dev

Key --save-dev azt mondja, hogy a bővítmény adatait (nevét a tároló és változat) adunk a konfigurációs package.json és emlékszik rá erre a projektre. Mivel mi nem tároljuk egy kerek keménykezű plug-ins mappába node_modules. tárolt konfigurációs információ a telepített plug-in lehetővé teszi egyetlen NPM megparancsolom telepíteni a projekt minden szükséges plug-inek.

Vannak csökkentés minden csapat, így a csapat felett, tudunk írni egy rövidebb méret

A jövőben, akkor is használhatja a rövidített formában parancsokat.

Stylus plugin Gulp

A mi projektek használjuk a pre-processzor Stylus ami működik, és állítják össze a csomópontot.

NPM i korty-tollal -D

CSS processzor plug-inek

Avtoprefikser - automatikusan beilleszti előtagok -ms- -O- -moz- -webkit- a kívánt tulajdonságok:

NPM i korty-autoprefixer -D

Minification CSS - Plugin minifitsiruet kimeneti CSS fájl mentése őt a felesleges szóközöket és tab:

NPM i korty-minify-CSS -D

képfeldolgozó dugó

Ötvözi a képeket sprite - akkor már nem kell órákat tölteni a drága időt, hogy összehozza az összes kép a sprite, majd kiszámítja a koordináták, mindezt automatikusan teszi ezt a plugint:

NPM i gulp.spritesmith -D

Egy korábban létrehozott fájl stylus.template.mustache maszk pozíciók számításának sprite:

Add speciális nyálkahal a mixins.styl:

Kösse nyálkahal és a generált fájlt a koordinátákat a fő stílus fájlt src / css / styles.styl.

Felhívjuk figyelmét, hogy a sprite fájlokat csatlakoznia kell egy felhasználói stílusok @import „részleges / stílus”

Optimalizálása képeket a weben - a bővítmény automatikusan kivágja a felesleges információkat a képeket és uzhmet őket az optimális méret, ami bizonyos esetekben, hogy a kép térfogatának csökkentésére legfeljebb 90%:

NPM i korty-imagemin -D

Minification JS - Plugin maximum minifitsiruet a JS kódot csökkenti a letöltési időt:

NPM i korty-elcsúfít -D

hibabejelentő JS - plug doskanalno ellenőrizze a JS kódot azonosítani az összes eltéréseket és azokat a konzolba:

NPM i jshint korty-jshint -D

Dugó HTML feldolgozás

Tartalmazzák kép - a plugin lehetővé teszi, hogy tárolja a statikus része a helyszínen, mint például a fejléc. Lábjegyzet. félre, stb külön fájlban, és csatlakoztassa őket bármely más fájlt. Ez már nem szükséges, abban az esetben a kis változások a fejlécben, megváltoztathatja a több tíz vagy akár több száz oldalnyi html sablon:

NPM i korty-állványozó -D

A beépülő modul is kompatibilis a JS.

JS csatlakozni a felhasználót, hogy a fő fájl JS src / js / main.js konsturktsiey:

Csatlakozzon az index.html fájlt, és header.html footer.html

További bővítmények

LiveReload - bővítmény fölöslegessé teszi, hogy szükség van az oldal újratöltődik minden alkalommal, amikor a böngésző, hogy a változások, ez most automatikusan bekapcsol, ha menteni a módosított fájlt:

NPM i korty-csatlakozni -D

Biztonságos korty indulás - néha előfordul, hogy Culp is repülnek ki az ellenőrzési rendszer esetén a kritikus hibák (főként a JS). Ez a plug-in, ha lehetséges, próbálja meg elhagyni egy működőképes folyamatok Gulp:

NPM i korty-vízvezeték -D

Átnevezi - a leggyakoribb feladat fájl nevét. A beépülő modul lehetővé teszi, hogy teljesen nevezni a fájlokat, változtassa meg a kiterjesztést, add előtagok és postfix, például, hogy a fájltípus style.styl style.min.css.

NPM i korty-átnevezés -D

Cleaner - néha szükség van egy teljes megtisztítása a katalógusban épít. Itt van a támogatás a plugin:

Sourcemap - az után minification fájlok maradnak olvasható a hibakeresés böngésző, meg kell adni a sourcemap minifitsiruemye fájlokat:

NPM i korty-sourcemaps -D

Továbbfejlesztett karóra - Plugin teszi intelligens karóra, most nem fogja felülírni a fájlokat a build, ha változtatni csak egyetlen fájlt felülírja változtatásokat a fájlt, amely időt és erőforrást takarít:

NPM i korty-nézni -D

Ellenőrizzük package.json

Miután az összes plugint, nézd meg a package.json. Meg kell hasonló a következő:

Ehelyett legújabb az Ön esetében, a konkrét változata a telepített pluginok regisztrálni. mert alkotunk mi kezdő csomagot, amelyet használni a különböző projektek, javasoljuk, hogy azt is cserélni az értéket a legújabb verziót. hogy mindig a legfrissebb változat a plug-inek a projekthez.

A projekt is megjelennek node_modules könyvtár mappát, ahová a fájlokat csomópont dugó. Minden szükséges plug-in telepítése, akkor folytassa beállítani a config Nyelő.

Beállítás gulpfile.js

gulpfile.js - a fő konfigurációs fájl feladatunk-manager, ez az, ahol tárolja az összes beállítás és parancs.

Korty Minden munka csökken a feladatra (Eng. Feladat). A kihívás - ez egy külön önálló nevezett funkció. Minden feladat kiváltható külön-külön.

sovmstimosti mód a modern szabványok

Először a fájl elején csatlakoztassuk a kompatibilis mód kizárólag a modern szabványok:

További információk ezen irányelv itt olvasható.

inicializálni a plugin

Dugó inicializálja a következő konstrukció:

var initPlugin = igényelnek ( 'bővítmény-neve');

Szerint ez a struktúra, amit inicializálni minden plug-inek:

módon állandók

Az egyszerűség kedvéért határozza meg a helyes utat, és minden maszkok:

Felhívjuk figyelmét, hogy tudjuk használni a maszkot neve:

• * Js - minden fájl js
• . [^ _] * Js - minden fájl js, kivéve azokat, amelyeket kezdődhet aláhúzással
• *. * - minden fájl esetleges kiterjesztése a jelenlegi ditrektorii
• /**/*.html - minden fájl kiterjesztését .html belül az aktuális könyvtárban és az összes gyermek könyvtárak

Task (feladat)

Most, hogy az összes állandókat regisztrált, akkor kezdjük el írni Taxco. Minden feladat felépítése a következő:

Mini szerver és LiveReload

Először létre a működését a helyi szerver és LiveReload:

A legvalószínűbb, hogy gyakran kell dolgozni egyszerre több projektben. A szerver lehetővé teszi, hogy futtatni több szerver, akkor elegendő, ha különböző projektek regisztrálni a port.

építeni sprite

Az összes kép bedolgozás sprite adunk a src / css / sprite és / áthaladás után Culp vált egységes sprite kép. A sprite nem szükséges a logók és háttérképek nélkül pontos méreteket.

Ha látni szeretné a sprite elég, hogy kihasználják a nyálkahal. Például egy fájlt lorem.png mintát a sprite fog kinézni:

Most az objektum osztály .lorem kép és énkép, mint a háttér.

Építsd statikus képek

Állóképek - a képet használja a sablont.

Építsd dinamikus képek

Dinamikus kép - a tartalom alapú képet, amely akkor változik a honlapon, és egy demonstrációs csatlakozik a sablont. Például, lehet, hogy a kép a híreket, és így tovább.

épít CSS

Elválasztani a feladat a külső stíluslap:

Is hozzá egy feladat, hogy építsenek egy közös CSS:

építeni betűtípusok

építeni .htaccess

A teljes építmények

Annak érdekében, hogy ne kelljen építeni az egyes részeket külön, felírni feladat az általános építmények:

Tisztítás építmények

Néha szükség van, hogy teljesen tiszta a katalógusban építeni. Itt jön a támogatás következő feladat:

Nézd vagy követési változásokat valós időben

Az egyik legfontosabb és leghasznosabb tulajdonsága a funkció Nyelő órát. amely lehetővé teszi, hogy nyomon követni minden változást a file-okat, és attól függően, hogy bizonyos műveleteket hajtanak végre valós időben:

Alapértelmezett Hozzászólások

Alapértelmezett művelet - ez az, amit feladata az lesz, hogy végezze el a feladatkezelő korty, amikor belépnek a parancsokat a konzolba:

A mi esetünkben, mi umonchaniyu sbildim a projektek, többek között nézni mód, és futtatni a szerveren.

A parancssori

Minden galpa parancsokat a parancssorból is két részből áll maga közvetlenül korty csapat és a résen neve Tasca. Itt van egy lista a parancsok érvényesek a config:

• korty - alap parancs elindítja a feladatot az alapértelmezett
• korty építmények - épít az összes
• korty karóra - karóra elindítása
• korty tiszta - tisztító build könyvtárban
• korty csatlakozni - start szerver
• korty html: épít - épít HTML
• korty jshint: épít - ellenőrizze a JS hibát
• korty js: építmények - kiépítése JS
• korty sprite: építeni - építeni a sprite
• korty image: építeni - build statikus képek
• korty imagecontent: építeni - build dinamikus képek
• korty cssOwn: építmények - kiépítése egyedi CSS
• korty cssVendor: épít - építeni külső CSS
• korty css: építeni - építeni egy közös CSS
• korty betűtípus: építmények - kiépítése font
• korty htaccess: építmények - kiépítése .htaccess

Ebben a szakaszban gulpfile.js beállítása befejeződött.

Másolja a kezdő csomag a projektben

Kezdeni, menjünk be a konzolt a mappát, ahol dolgozunk, mint a cd fejlesztésére / példája és másolni a kezdőcsomag könyvtárat a projekt cp -a

Egy ilyen folyamatot a másolás a legmegfelelőbb, mert pontosan másolni, beleértve a rejtett fájlokat, stb .gitignore.

következtetés

Az útmutató használata, már készített egy kezdőcsomag Culp használni a saját projektek a Front-end fejlesztés.

Töltse le a teljes csomag: start.zip

Továbbá, ez a csomag elérhető a GitHub

Hozzászólás Scriptum

Szinte minden oldalon van egy szakasz vélemények és alakját az írás. A szükségesség Egy ilyen szakasz van írva okos könyvek a tervezési internetes források, mondván, hogy azért, mert akkor kap visszajelzést a felhasználóktól. Ez csak a visszajelzést a túloldalon.

Szinte minden cég, termék, és még inkább a hivatal copywriters gyakran van szükség. Nem számít, hogy ez a helyzet a szövegíró, tartalom menedzser, PR-szakember, vagy egy egyszerű menedzser, gyakran egy - írja a szövegeket. Látszólagos egyszerűsége ellenére, jó írás változatos szövegek nem biztosítanak mindenkinek.

Sok kezdődő copywriters félnek, hogy közvetlenül a hivatal. Ezek nem biztos, hogy tudja kezelni a terhelést, és általában alkalmasak a poszt, így a tanácsadás vezető kollégái küldött a csere. Maga az ötlet az ilyen cserék inspiráló: a munka szabadúszóként, hogy építsenek egy szabad menetrend, nem kötődik egy helyen. De a rózsaszín szemüveg leesik után az elsőrendű vagy egyszerű matematikai feladat.