gulpのメモ。ついでもbootstrap4も

mkdir testdir  // 「textdir」ディレクトリ作成
cd testdir     // 「textdir」ディレクトリに移動
npm init       // package.jsonを作成

{
  "name": "testdir", //ディレクトリの名前
  "version": "1.0.0", //バーション
  "description": "",  //詳細
  "main": "index.js",  
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

npm install --save-dev gulp

npm install パッケージ名 --save
//package.json の dependencies に追記される。
//カレントディレクトリの node_modules 以下にパッケージがインストールされる

npm install パッケージ名 --save-dev
//package.json の devDependencies に追記される。
//カレントディレクトリの node_modules 以下にパッケージがインストールされる

touch gulpfile.js

var gulp require('gulp'); //gulpパッケージを読み込む

gulp.task('test1',function(){
  console.log('タスク１');
});

gulp.task('test2',function(){
  console.log('タスク２');
});

gulp.task('test3',function(){
  console.log('タスク３');
});

//guldfile.jsでさらに下記を追記
gulp.task('default',['test1','test2','test3']);

gulp

gulp タスク名

var gulp = require('gulp');

//タスクを定義
gulp.task('test4',function(){
  // gulp.srcでコピーしたいファイルを指定　
　　　　//.pipeつなぐ
  // gulp.destでコピー先を指定
    gulp.src('src/example.js').pipe(gulp.dest('./'));
});

//先ほどのタスク(test4)をデフォルトタスクに登録
gulp.task('default',['test4']);

var gulp = require('gulp');

//コピーしたいタスクを定義
gulp.task('test5',function(){
    gulp.src('src/example.js').pipe(gulp.dest('.new/'));
});

//タスクの中にtest5タスクを登録して、test6タスクを定義
gulp.task('test6',['test5'],function(){
    console.log('コピー完了');
});

//test6タスクをデフォルトタスクに登録
gulp.task('default',['test6']);

npm install [email protected] -D

@import "node_modules/bootstrap/scss/bootstrap";
@import "style.scss"  /*自分で記述したscssファイル*/

var gulp = require('gulp');
var sass = require('gulp-sass'); // gulp-sassパッケージを読み込む


gulp.task("sass", function() {
    gulp.src("style.scss") //先ほどのstyle.cssを指定
        .pipe(sass())           // sassのコンパイル
        .pipe(gulp.dest("src")); //srcディレクトリの中にコンパイルされたcssが作成される
});

npm install gulp-autoprefixer --save-dev #ベンダープレフィックスをつけてくれる
npm install gulp-clean-css --save-dev  #圧縮してくれる

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer'); //gulp-autoprefixer読み込み
let cleanCSS = require('gulp-clean-css'); //gulp-clean-css読み込み


gulp.task("sass", function() {
    gulp.src("dist/style.scss")
        .pipe(sass())
        .pipe(autoprefixer()) //ベンダープレフィックスをつける
        .pipe(cleanCSS({compatibility: 'ie8'})) //圧縮
        .pipe(gulp.dest("./src"));
});