note livereload will only track files that it sees when you first start the gulp task.while you terminal, browser, and sublime text are all visible, add the following to your styles.scss.You should see a dark grey background and your single black h1 text Open the styles.css file in SublimeText (the /public/styles/styles.css file, not the /sass/styles.scss file) If #333333 loads as the background color, variables are working, and thus, sass is working). In the sass/styles.scss file, write the "Hello World" of Sass (we are checking if variables work. keeps gulp from crashing for scss errors include an h1 element in the body with the content of Hello Gulp, Sass, and Livereload.in the index file head, load css/styles.css.generate a base html5 template in public/index.html.set up root html5 template file touch public/index.html.set up sass compiled output directory mkdir -p public/css.set up sass source file touch sass/styles.scss.set up sass source directory mkdir sass/.install and save required dependencies using npm install -D.add and commit your 2 new files to be tracked in git.initialize your project with a package.json file.Set up gulp + sass + livereload for your project set up node modules If you already have these installed, skip to the next step. If you do not have npm or gulp installed globally, you need to install them. watch for any changes in the public directory, and trigger live-reloadįirst, make sure you have all the required dependencies.watch for any sass changes, then compiles sass source into css.This Gist goes over setting up a gulp workflow that will:
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |