Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

3 лет назад
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. #Browsersync - Gulp & SASS
  2. ## Installation/Usage:
  3. To try this example, follow these 4 simple steps.
  4. **Step 1**: Clone this entire repo
  5. ```bash
  6. $ git clone https://github.com/Browsersync/recipes.git bs-recipes
  7. ```
  8. **Step 2**: Move into the directory containing this example
  9. ```bash
  10. $ cd bs-recipes/recipes/gulp.sass
  11. ```
  12. **Step 3**: Install dependencies
  13. ```bash
  14. $ npm install
  15. ```
  16. **Step 4**: Run the example
  17. ```bash
  18. $ npm start
  19. ```
  20. ### Additional Info:
  21. This example highlights both the stream support for injecting CSS, as well
  22. as the support for calling `reload` directly following html changes.
  23. ### Preview of `gulpfile.js`:
  24. ```js
  25. var gulp = require('gulp');
  26. var browserSync = require('browser-sync').create();
  27. var sass = require('gulp-sass');
  28. var reload = browserSync.reload;
  29. var src = {
  30. scss: 'app/scss/*.scss',
  31. css: 'app/css',
  32. html: 'app/*.html'
  33. };
  34. // Static Server + watching scss/html files
  35. gulp.task('serve', ['sass'], function() {
  36. browserSync.init({
  37. server: "./app"
  38. });
  39. gulp.watch(src.scss, ['sass']);
  40. gulp.watch(src.html).on('change', reload);
  41. });
  42. // Compile sass into CSS
  43. gulp.task('sass', function() {
  44. return gulp.src(src.scss)
  45. .pipe(sass())
  46. .pipe(gulp.dest(src.css))
  47. .pipe(reload({stream: true}));
  48. });
  49. gulp.task('default', ['serve']);
  50. ```