CSS Conf EU 2017
MIT License
What's set up here:
git clone https://github.com/una/gulp-starter-env
(in terminal) or download the zipcd
(change directory) to the folder containing your project. (i.e. if I start at ~ and I have a Dev folder on my Desktop containing this project, I might type cd Desktop/Dev/gulp-starter-env
). Alternatively, you can type cd
and drag the location of the folder into your terminal and hit enter.npm install
. If (and only if) you're having trouble with npm install
, try sudo npm install
-- this makes you act as a super usergulp
http://localhost:3000
. You can access this same page on your various devices in the same wifi network with the provided External URL. You can share the External URL with coworkers and they'll see whats on your screen.dist/
. It will create your optimized css, html, and javascript files for you. Never edit files within the dist/
folder. (Dist stands for Distribution)ctrl + C
This linter is the only ruby
dependency in this project (and it's optional)
File Linting is where you read your file to make sure that your code conforms to standards. You should be doing this continuously.
If you're using a text editor like Sublime, I'd recommend installing SublimeLinter
and SublimeLinter-contrib-scss-lint
. You can also lint with gulp inside of your terminal by running gulp scss-lint
. Similar linters are available for other text editors.
You can run gulp deploy
to push your site onto the gh-pages branch. Then, you can navigate to it via http://< your-github-username >.github.io/< project-name > Note: this doesn't work if your project name is < your-github-username >.github.io.
cd
: change directory (a terminal command). Make sure you have a space between cd
and the location you are navigating torepo
: repository (this is a 'repository' of code)sudo
: you get access as a 'super user' of your system (you can override permissions)npm
: node project manager -- the command line task manager that is installing everything inside of package.json
package.json
: a file with information about your project. This is also where your list of dependencies lives which npm installsgulp
: a task manager that is running a bunch of scripts to make this environment workdist
: distribution folder -- don't edit anything in here. It is where your gulp task builds intoscss
: a Sass syntax that imitates CSS