|
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 |
- #Browsersync - Gulp & SASS
-
- ## Installation/Usage:
-
- To try this example, follow these 4 simple steps.
-
- **Step 1**: Clone this entire repo
- ```bash
- $ git clone https://github.com/Browsersync/recipes.git bs-recipes
- ```
-
- **Step 2**: Move into the directory containing this example
- ```bash
- $ cd bs-recipes/recipes/gulp.sass
- ```
-
- **Step 3**: Install dependencies
- ```bash
- $ npm install
- ```
-
- **Step 4**: Run the example
- ```bash
- $ npm start
- ```
-
- ### Additional Info:
-
-
-
- This example highlights both the stream support for injecting CSS, as well
- as the support for calling `reload` directly following html changes.
-
-
- ### Preview of `gulpfile.js`:
- ```js
- var gulp = require('gulp');
- var browserSync = require('browser-sync').create();
- var sass = require('gulp-sass');
- var reload = browserSync.reload;
-
- var src = {
- scss: 'app/scss/*.scss',
- css: 'app/css',
- html: 'app/*.html'
- };
-
- // Static Server + watching scss/html files
- gulp.task('serve', ['sass'], function() {
-
- browserSync.init({
- server: "./app"
- });
-
- gulp.watch(src.scss, ['sass']);
- gulp.watch(src.html).on('change', reload);
- });
-
- // Compile sass into CSS
- gulp.task('sass', function() {
- return gulp.src(src.scss)
- .pipe(sass())
- .pipe(gulp.dest(src.css))
- .pipe(reload({stream: true}));
- });
-
- gulp.task('default', ['serve']);
-
- ```
-
|