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 のディレクトリ指定は、絶対ディレクトリ、カレントディレクトリからの相対ディレクトリは有効なのですが ~/ 指定ではうまくいきませんでした。

　ほんまの最終版は、ディレクトリやファイル名を変更するんですがそこはまあ「ちゃい」なので。

　オートアップデートさせることもできるのですが、確認しながらやりたいので、あえてそこはさわらないのです。