【今日から携わる】5分でおわるよ!gulpでsassのコンパイルしませんか?(コピペでオーケー)
シンプルなgulpの環境を手っ取り早く作成したい人向けです
環境
Mac
gulpでsassのコンパイルをしてみましょう
ファイルをダウンロード
下記より、ファイルをダウンロードする
https://github.com/abenosite/gulp-01
node -v
npm install gulp -g
npm install --save
gulp watch
・scssファイルが自動でcssファイルにコンパイルされるようになる
・--save は package.json の dependencies に追記される。
・nodeが入っていない場合は、nodeをインストールする
詳細
【ターミナル】node -v(nodeが入っているか確認)
nodeがインストールされてるかチェック
node -v
(もし)nodeのバージョンv10.9.0
などが表示されたら【1-2.】へ進む
【ターミナル】nodeインストール
brew install node
ちゃんとインストールされているか下記のコマンドでチェックする
node -v
v10.9.0
などが表示されたら次に進む
nodeやnpmが入ってない場合は下記参照
https://hirooooo-lab.com/development/nstall-node/
【ターミナル】gulpインストール(グローバル)
gulpをグローバルにインストールする
<リンク>グローバルインストールとは
※gulpをグローバルにインストールすることでgulp watch
コマンドでscssを自動コンパイルさせることができる。
npm install -g gulp
ちゃんとインストールされているか下記のコマンドでチェックする
gulp -v
下記のように表示されればOKです。
[23:24:09] CLI version 3.9.1
[23:24:09] Local version 3.9.1
案件フォルダ作成
下記のようなディレクトリで、空フォルダを作成してください
gulp-sass
├── css //空フォルダ
├── scss
| └── main.scss //空ファイル作成
└── gulpfile.js //空ファイル作成
ターミナルでgulp-sassフォルダに移動
【ターミナル】npm init
※npmをインストールした後最初に使用する初期化処理するコマンドです。 初期化処理を行うことで、package.jsonが生成されます。
npm init
エンターを連打する(10回くらい)
【ターミナル】npm install --save-dev gulp
※--save-dev は package.json の devDependencies に追記されるそうです。
勉強メモ/npmの使い方(node.js=v0.11.16, npm=2.3.0, 2015-03時点)
(https://qiita.com/msakamoto_sf/items/a1ae46979a42d6948ebd)
npm install gulp -g
npm install --save-dev gulp
【ターミナル】npm install --save-dev gulp-sass
npm install --save-dev gulp-sass
gulpfile.js作成
空の「gulpfile.js」に下記を記述して保存する
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('scss/*.scss')
.pipe(sass({
style : 'expanded',
}))
.pipe(gulp.dest('css/'));
});
gulp.task('watch', function () {
gulp.watch('scss/*.scss', ['sass']);
});
main.scss作成
空の「main.scss」に下記を記述して保存する
body {
font-size: 10px;
main {
font-size: 1.6rem;
}
.text-danger {
color: red;
}
}
【ターミナル】gulp watch
gulp watch
cssを吐き出すようになります。
※変更したscssを保存した瞬間にcssが自動でコンパイルされるようになります。
おわりに
「タスクランナーってなに? Gulpは難しいから使いたくない!」って言う人がいます。(先月までの自分の言葉)
しかし、最低限なら簡単に実装することもできるのです。
今回使ったgulpファイルはカスタムが可能です。
カスタムすれば、下記のタスクを自動で行うことができるようになります。
・CSSやJavaScriptなどの圧縮
・画像の圧縮
・HTMLの文法チェック
・CSSの文法チェック
・メディアクエリの順番を整頓
・ブラウザーのベンダープリフィックスを自動付与
・プロパティの順番を整理
・CSSのスタイルガイドを自動生成
・EJS形式で書かれたファイルをHTMLに変換
ターミナル操作に慣れてない方はLinuxコマンドの練習が必要になります。
必ずgulp以外でも役にたちます。
黒い画面に慣れてください。めちゃ便利です。
最後に、面倒なgulpファイルを自動で生成するサイトを紹介して終わります。
gulp generator
追記(gulpのカスタム)
glob でパーシャルファイルを一括で読み込んで幸せになろう
main.scss
@charset "utf-8";
@import "Base/**";
@import "Layout/**";
@import "Module/**";
@import "Setting/**";
gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
gulp.task('sass', function () {
gulp.src('assets/scss/*.scss')
.pipe(sassGlob())
.pipe(sass({
style : 'expanded',
}))
.pipe(gulp.dest('assets/css/'));
});
gulp.task('watch', function () {
gulp.watch('assets/scss/*.scss', ['sass']);
});
npm install --save
npm install --save-dev gulp-sass-glob
gulp watch
参考
【Sass】固定と可変どちらもいける簡単グリッドシステム【Mixin】 @sawadays0118
https://qiita.com/sawadays0118/items/8dccaf00a7452ee41295
nodebrewでnodeのバージョンを切り替える方法
https://qiita.com/kuriya/items/36ae29366df0b7c95dec
@charset "utf-8";
@import "Base/**";
@import "Layout/**";
@import "Module/**";
@import "Setting/**";
var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
gulp.task('sass', function () {
gulp.src('assets/scss/*.scss')
.pipe(sassGlob())
.pipe(sass({
style : 'expanded',
}))
.pipe(gulp.dest('assets/css/'));
});
gulp.task('watch', function () {
gulp.watch('assets/scss/*.scss', ['sass']);
});
npm install --save
npm install --save-dev gulp-sass-glob
gulp watch
【Sass】固定と可変どちらもいける簡単グリッドシステム【Mixin】 @sawadays0118
https://qiita.com/sawadays0118/items/8dccaf00a7452ee41295
nodebrewでnodeのバージョンを切り替える方法
https://qiita.com/kuriya/items/36ae29366df0b7c95dec
参考gulpfile
var path = require("path");
var fs = require("fs");
var pkg = JSON.parse(fs.readFileSync("./package.json"));
var assetsPath = path.resolve(pkg.path.assetsDir);
var gulp = require("gulp");
// sass compiler
var sass = require("gulp-sass");
var sassGlob = require("gulp-sass-glob");
// add vender prifix
// var autoprefixer = require("gulp-autoprefixer");
var postcss = require("gulp-postcss");
var autoprefixer = require("autoprefixer");
var postcssGapProperties = require("postcss-gap-properties");
// error handling
var plumber = require("gulp-plumber");
gulp.task("scss", function () {
gulp
.src(path.join(assetsPath, "assets/scss/**/*.scss"))
.pipe(sassGlob())
.pipe(plumber())
.pipe(
sass({
indentType: "space",
indentWidth: 4
})
)
.pipe(postcss([
postcssGapProperties(),
autoprefixer({
grid: true
// cascade: false
})
]))
//.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(gulp.dest(path.join(assetsPath, "assets/scss/")));
});
// コードフォーマット
gulp.task("prettier", () => {
return gulp
.src(["/src/**/scss/*.{sass,scss}", "/src/**/js/*.js"])
.pipe(
prettierPlugin({
//①Prettierのオプションを指定する
prettier: {
singleQuote: false,
tabWidth: 4
}
}, {
filter: true
})
)
.pipe(gulp.dest(file => file.base));
});
gulp.task("watch", function () {
gulp.watch(path.join(assetsPath, "assets/scss/**/*.scss"), ["scss"]);
});
package.json
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"sass-format": "prettier-stylelint --quiet --write ./public/sass/**/**.scss",
"html-format": "prettier --write ./public/**/*.{html,php}"
},
"author": "",
"license": "ISC",
"dependencies": {
"acorn": "^6.0.4",
"bootstrap": "^4.1.3",
"izimodal": "^1.5.1",
"popper.js": "^1.14.6",
"slick-carousel": "^1.8.1"
},
"devDependencies": {
"@prettier/plugin-php": "^0.6.0",
"autoprefixer": "^8.6.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^6.0.0",
"gulp-plumber": "^1.2.0",
"gulp-postcss": "^7.0.1",
"gulp-prettier-plugin": "^1.3.0",
"gulp-sass": "^4.0.1",
"gulp-sass-glob": "^1.0.9",
"popper": "^1.0.1",
"postcss-custom-properties": "^8.0.9",
"prettier": "^1.15.1",
"prettier-stylelint": "^0.4.2",
"sass-lint": "^1.12.1",
"stylelint-config-standard": "^18.2.0",
"postcss-gap-properties": "^1.0.0"
},
"path": {
"assetsDir": "./public/"
}
}
Author And Source
この問題について(【今日から携わる】5分でおわるよ!gulpでsassのコンパイルしませんか?(コピペでオーケー)), 我々は、より多くの情報をここで見つけました https://qiita.com/abeno/items/16275556c751b5615937著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .