HTML - Autoprefixer - 本番環境構築

 
1. 本番環境構築

1. 本番環境構築

 前項まででほぼ動きがわかってきたので、いったん環境を削除して

> rm -R ~/npm
 改めて、構築します。

> cd
> npm init
> npm install --save-dev gulp
> npm install --save-dev gulp-sass
> npm install --save-dev gulp-autoprefixer
 テスト用のディレクトリを作成します。

> mkdir -pv ~/scss
> mkdir -pv ~/css

~/gulpfile.js
 を以下のように作成しました。

var gulp		 = require("gulp"),
	sass		 = require('gulp-sass'),
	autoprefixer = require("gulp-autoprefixer");

gulp.task("cmp", function () {
	gulp.src("scss/*.scss")
 	.pipe(sass({ outputStyle: 'compressed'}))
 	.pipe(autoprefixer({
            browsers: ["last 2 versions"],
            cascade: false
        }))
	.pipe(gulp.dest("css"));
});

gulp.task("exp", function () {
	gulp.src("scss/*.scss")
 	.pipe(sass({ outputStyle: 'expanded'}))
 	.pipe(autoprefixer({
            browsers: ["last 2 versions"],
            cascade: false
        }))
	.pipe(gulp.dest("css"));
});
 gulp.dest のディレクトリ指定は、絶対ディレクトリ、カレントディレクトリからの相対ディレクトリは有効なのですが ~/ 指定ではうまくいきませんでした。  ほんまの最終版は、ディレクトリやファイル名を変更するんですがそこはまあ「ちゃい」なので。  オートアップデートさせることもできるのですが、確認しながらやりたいので、あえてそこはさわらないのです。