text 一饮而尽ファイル

Posted 2021-05-03

//gulpfile.jsを作成
var gulp = require('gulp');
var sass = require('gulp-sass');
var compass = require('gulp-compass');
var plumber = require('gulp-plumber');
var browserSync =require('browser-sync');

// gulp-compass
gulp.task('compass', function() {
  gulp.src('./html/scss/**/*.scss')
  .pipe(plumber())
  .pipe(compass({
      config_file: 'config.rb',
      sass: 'scss',
      css: 'css'
  }));
});

gulp.task('browser-sync', function() {
  browserSync({
    server: {
       baseDir: "./"       //対象ディレクトリ
      ,index  : "test.html"      //インデックスファイル
    }
  });
});

gulp.task('bs-reload', function () {
  browserSync.reload();
});


// 監視する
gulp.task('watch' , ['compass' , 'browser-sync'] , function(){
  gulp.watch('./scss/**/*.scss', ['compass']);
  gulp.watch("./**/*.html", ['bs-reload']);
  gulp.watch("./css/**/*.css", ['bs-reload']);
  gulp.watch("./js/**/*.js", ['bs-reload']);
});

■cdでディレクトーに移動

■package.jsonファイルの作成
npm init

or

※package.jsonの中身一括インストール
npm install

■Gulpのインストール
npm install --save-dev gulp
npm install --save-dev gulp-plumber
npm install --save-dev gulp-compass	
npm install --save-dev browser-sync
npm install --save-dev gulp-sass


■gulpfile.jsを作成

↓
■実行
gulp watch
解除 ctrl+c


■style.scssの順番
mixinを最初に読み込む

@charset 'UTF-8';
@import '_mixin';
@import 'compass';
@import "_color";
@import "_reset";
・
・
・