固定ヘッダーを被らせずに別ページ遷移&ページ内リンク対応させるやつ

ど素人のgulpの使い方まとめ

とりあえず参考サイト

とりあえずSassのコンパイルだけなら下記のそのままでいける

ttps://ics.media/entry/3290

あれやこれややりたいなら下記がとても参考になる

今からでも遅くないGulpを使った開発環境の作り方

が、しかしgulp3系統での話なので最後の最後で監視するところでうまくいかない+「gulp-progeny」のせいで動かないのでこれだけ削除した。

 

導入しませう

  1. とりあえずNode.jsを入れる必要がある
  2. 作業するようのフォルダを作成する
  3. ターミナルでcd(チェンジディレクトリ)を打って、上記フォルダを掘り込む
  4. npm init -yを入力でpackage.jsonを作成
  5. 作ったフォルダ(ローカル)にnpm install -D gulpでgulpをインスコ
  6. とりあえずgulpの下準備おわた

 

Sassコンパイルして画像の圧縮してブラウザの自動リロードしたい

gulpfile.js(gulpの設定ファイル)を適当に作る。

そこにvar gulp = require( ‘gulp’ );を記載

で、やりたいタスクをインスコしてここに記載していく。

 

Sass関連

内容はググろう

 

画像ファイルの圧縮関連

内容はググろう。とりあえずだいたいの拡張子の画像を圧縮

js関連のはいらんので無視

 

ブラウザのオートリロード

–save-devにしてるので勝手にpackage.jsonに記載されやす

 

「gulpfile.js」の設定

いちばん四苦八苦したところですが。一旦これで動くってのを貼る。

// gulpプラグインの読み込み
const gulp = require(‘gulp’);
// Sassをコンパイルするプラグインの読み込み
const sass = require(‘gulp-sass’);
const autoprefixer = require( ‘gulp-autoprefixer’ );
const plumber = require( ‘gulp-plumber’ );
const sourcemaps = require( ‘gulp-sourcemaps’ );
const imagemin = require(‘gulp-imagemin’);
const mozjpeg = require(‘imagemin-mozjpeg’);
const pngquant = require(‘imagemin-pngquant’);
const changed = require(‘gulp-changed’);
const browserSync = require( ‘browser-sync’ );
// style.scssをタスクを作成する
gulp.task(‘sass’, function () {
// style.scssファイルを取得
 return gulp.src(‘./assets/css/**/*.scss’)
// Sassのコンパイルを実行
.pipe(plumber() )
.pipe(sourcemaps.init() )
.pipe(sass({
outputStyle: ‘expanded’
})
// Sassのコンパイルエラーを表示
// (これがないと自動的に止まってしまう)
.on(‘error’, sass.logError))
.pipe(autoprefixer( {
browsers: [‘last 2 version’, ‘iOS >= 8.1’, ‘Android >= 4.4’],
cascade: false
}))
// cssフォルダー以下に保存
.pipe(gulp.dest(‘./assets/css’));
});
gulp.task(“imagemin”, function () {
return gulp
.src(‘./assets/images/org/**’)
.pipe(changed(‘./assets/images/dist’))
.pipe(
imagemin([
pngquant({
quality: [.60, .70], // 画質
speed: 1 // スピード
}),
mozjpeg({ quality: 65 }), // 画質
imagemin.svgo(),
imagemin.optipng(),
imagemin.gifsicle({ optimizationLevel: 3 }) // 圧縮率
])
)
.pipe(gulp.dest(‘./assets/images/dist’));
});
// Browser Sync
gulp.task(‘bs’, function() {
browserSync({
server: {
baseDir: “./”,
index: “index.html”
}
});
});
// Reload Browser
gulp.task( ‘bs-reload’, function (done) {
browserSync.reload();
done();
});
// Default task
gulp.task(‘watch’, function(){
gulp.watch(“./assets/css/**/*.scss”, gulp.series(‘sass’));
gulp.watch(‘./assets/images/org/**’, gulp.task(‘imagemin’));
gulp.watch(“./**”, gulp.series(‘bs-reload’));
});
/// Gulpコマンドで動かすもの ////////////////////////////////////////////
gulp.task(‘default’, gulp.parallel(‘bs’,’watch’));
 

適宜は適宜やってください。
ちなみに

 

「/**」はそのディレクトリ全部

「/*.scss」はそのディレクトリのscss全部とかいう動き

メモ書きでした。

 

追記

PHP扱いたいときは下記をインスコして

適宜gulpfile.jsを更新

ターミナルからサーバーを触るあれこれ

ssh -p 22 root@aaa.bbb.ccc.ddd
ディレクトリに移動

ls
今居るディレクトリにあるファイルを表示

pwd
今居るディレクトリのルートパスを表示

cd
チェンジディレクトリ

フォントをCSSで複数読み込む方法

Googleフォントを自前でサーバーに突っ込む時にどうやって表示すんの?ってなった時のメモ。

表示したい箇所に下記を当て込む

この形式でフォントのウェイトや種類を複数取り込むことができるよ!

本当のデンス、チャンス、ロマンスは自分次第やで!

ソーシャルのボタン

Facebook、Twitter、Google+、はてなブックマーク、LINEなど基本的なの

metaに記載も必須

 

JSを画面サイズによって切り替え

使い勝手が良いのでメモ

ムッチャ使う ナビゲーションなどfixed

よく使うからメモ