Category: gulp

gulpでjsの圧縮

$ mkdir gulp_js
$ cd gulp_js
$ npm init -y

$ npm install -D gulp
$ npm install -D gulp-uglify
$ npm install -D gulp-rename

gulpfile.js

var gulp = require("gulp");
var rename = require("gulp-rename");
var uglify = require("gulp-uglify");

gulp.task("default", function(){
    gulp.src('src/something.js')
        .pipe(uglify())
        .pipe(rename({
            extname: '.min.js'
        }))
        .pipe(gulp.dest('dest/'));
    done();
});

something.min.js

console.log("hello world!"),console.log("hello world! 2");

minifyされていることが確認できます。
一旦はSassだけでスタートして、JSは後からやりますか…

gulpの初期設定(gulpfile.js)

$ npm init -y
// gulpのインストール
$ npm install gulp –save-dev

gulpfile.js

const gulp = require('gulp');

gulp.task('default', function(){
    console.log('Gulp is running');
});

### sassの導入
$ npm install –save-dev gulp-sass sass

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

gulp.task('default', function(){
    console.log('Gulp is running');
    done();
});

gulp.task('sass', function() {
    return gulp.src('dev/scss/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('dist/css'));
});

gulp.task('default', gulp.series('sass'));

$primary-color: #333;

body {
    color: $primary-color;
}

$ npx gulp

cssファイルはできるんだけど、サーバを動かしながら見たいな…

prettier

npm install -D prettier gulp-prettier-plugin

var gulp = require('gulp');
var prettierPlugin = require('gulp-prettier-plugin');
var imagemin = require('gulp-imagemin');
var sass = require('gulp-sass');
var sassLint = require('gulp-sass-lint');
var eslint = require('gulp-eslint');
var plumber = require('gulp-plumber');
var webserver = require('gulp-webserver');

gulp.task('prettier', function(done){
	gulp.src(['./src/sass/*.scss','./src/*.js'])
		.pipe(prettierPlugin({
			prettier:{
				singleQuote:true
			},
		},{filter: true}))
		.pipe(gulp.dest(file => file.base))
	done();
});

gulp.task('html', function(done){
	gulp.src('./src/*.html')
		.pipe(gulp.dest('./dest'))
	done();
});


gulp.task('img', function(done){
	gulp.src('./src/img/*.png')
		.pipe(imagemin())
		.pipe(gulp.dest('./dest/img'))
	done();
});

gulp.task('sass', function(done){
	gulp.src('./src/sass/*.scss')
		.pipe(plumber())
		.pipe(sassLint())
		.pipe(sassLint.format())
		.pipe(sassLint.failOnError())
		.pipe(sass({outputStyle: 'expand'}))
		.pipe(gulp.dest('./dest/css'))
	done();
});

gulp.task('js', function(done){
	gulp.src(['./src/*.js','!node_modules/**'])
		.pipe(plumber())
		.pipe(eslint({ useEslintrc: true }))
		.pipe(eslint.format())
		.pipe(eslint.failAfterError())
		.pipe(gulp.dest('./dest/js'))
	done();
});

gulp.task('watch', function(done){
	gulp.watch('./src/*.html', gulp.task('html'))
	gulp.watch('./src/js/*.html', gulp.task('js'))
	gulp.watch('./src/sass/*.scss', gulp.task('sass'))
	done();
});

gulp.task('webserver', function(done){
	gulp.src('./dest')
		.pipe(webserver({
			host:'192.168.34.10',
			port: 8000,
			livereload: true,
		}));
	done();
});

gulp.task('default', gulp.series('prettier','html','js','img','sass','watch','webserver'));

とりあえず、環境構築はこんなところか。
さー、front書き始めましょうかね^^

gulp + sassの環境を整えよう

## sassをインストール
$ npm i -D gulp-sass

imgを圧縮し、sassとhtmlを編集したら、自動反映にします。

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var webserver = require('gulp-webserver');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');

gulp.task('html', function(done){
	gulp.src('./src/*.html')
		.pipe(gulp.dest('./dest'))
	done();
});

gulp.task('img', function(done){
	gulp.src('./src/img/*.png')
		.pipe(imagemin())
		.pipe(gulp.dest('./dest/img'))
	done();
});

gulp.task('sass', function(done){
	gulp.src('./src/sass/*.scss')
		.pipe(plumber())
		.pipe(sass({outputStyle: 'expand'}))
		.pipe(gulp.dest('./dest/css'))
	done();
});

gulp.task('watch', function(done){
	gulp.watch('./src/*.html', gulp.task('html'))
	gulp.watch('./src/sass/*.scss', gulp.task('sass'))
	done();
});

gulp.task('webserver', function(done){
	gulp.src('./dest')
		.pipe(webserver({
			host:'192.168.34.10',
			port: 8000,
			livereload: true,
		}));
	done();
});

gulp.task('default', gulp.series('html','img','sass','watch','webserver'));

あ、これでいいじゃん。あとは、JSとCSSのLint周りか

gulp 4

gulp-webserver
$ npm i -D gulp-webserver

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var plumber = require('gulp-plumber');
var header = require('gulp-header');
var webserver = require('gulp-webserver');

gulp.task('html', function(done){
	gulp.src('./src/index.html')
		.pipe(gulp.dest('./dest'))
	done();
});

gulp.task('img', function(done){
	gulp.src('./src/img/*.png')
		.pipe(imagemin())
		.pipe(gulp.dest('./dest/img'))
	done();
});

gulp.task('js', function(done){
	gulp.src('./src/coffee/*.coffee')
		.pipe(plumber())
		.pipe(coffee())
		.pipe(concat('all.min.js'))
		.pipe(uglify())
		.pipe(header('/* copry righ @hpscript */'))
		.pipe(gulp.dest('./dest/js'))
	done();
});

gulp.task('watch', function(done){
	gulp.watch('./src/coffee/*.coffee', gulp.task('js'))
	gulp.watch('./src/*.html', gulp.task('html'))
	done();
});

gulp.task('webserver', function(done){
	gulp.src('./dist')
		.pipe(webserver({
			host:'192.168.34.10',
			livereload: true
		}));
	done();
});

gulp.task('default', gulp.series('html','img','js','watch','webserver'));

きた。livereloadが動かないと思ったら、htmlタグでないとダメのようね。
OK。では、sass + gulpの環境を考えましょう

gulp 4

watchの使い方

gulp.task('watch', function(done){
	gulp.watch('./src/coffee/*.coffee', gulp.task('js'))
	done();
});

gulp.task('default', gulp.series('html','img','js','watch'));

素晴らしい!
しかしsassの–watchとどうやって一緒に使うんだろうか、これ。

gulp-plumber

gulp.task('js', function(done){
	gulp.src('./src/coffee/*.coffee')
		.pip(pulumber())
		.pipe(coffee())
		.pipe(concat('all.min.js'))
		.pipe(uglify())
		.pipe(gulp.dest('./dest/js'))
	done();
});

gulp.task('js', function(done){
	gulp.src('./src/coffee/*.coffee')
		.pipe(plumber())
		.pipe(coffee())
		.pipe(concat('all.min.js'))
		.pipe(uglify())
		.pipe(header('/* copry righ @hpscript */'))
		.pipe(gulp.dest('./dest/js'))
	done();
});

/* copry righ @hpscript */(function(){}).call(this),function(){}.call(this);

アジャイル・チーム開発では属人性をなくす為、出来るだけcopy rightは付けたくないんだよなー

gulp 3

gulp-imageminで圧縮する

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');

gulp.task('html', function(done){
	gulp.src('./src/index.html')
		.pipe(gulp.dest('./dest'))
	done();
});

gulp.task('img', function(done){
	gulp.src('./src/img/*.png')
		.pipe(imagemin())
		.pipe(gulp.dest('./dest/img'))
	done();
});

gulp.task('default', gulp.series('html','img'));

e.g. 150.2kb → 80.1kb

$ npm i -D gulp-coffee gulp-concat gulp-uglify

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

gulp.task('html', function(done){
	gulp.src('./src/index.html')
		.pipe(gulp.dest('./dest'))
	done();
});

gulp.task('img', function(done){
	gulp.src('./src/img/*.png')
		.pipe(imagemin())
		.pipe(gulp.dest('./dest/img'))
	done();
});

gulp.task('js', function(done){
	gulp.src('./src/coffee/*.coffee')
		.pipe(coffee())
		.pipe(concat('all.min.js'))
		.pipe(uglify())
		.pipe(gulp.dest('./dest/js'))
	done();
});

gulp.task('default', gulp.series('html','img','js'));

[vagrant@localhost gulp]$ gulp
[10:49:46] Using gulpfile ~/gulp/gulpfile.js
[10:49:46] Starting ‘default’…
[10:49:46] Starting ‘html’…
[10:49:46] Finished ‘html’ after 8.49 ms
[10:49:46] Starting ‘img’…
[10:49:46] Finished ‘img’ after 2.97 ms
[10:49:46] Starting ‘js’…
[10:49:46] Finished ‘js’ after 1.92 ms
[10:49:46] Finished ‘default’ after 17 ms
[10:49:48] gulp-imagemin: Minified 1 image (saved 70.1 kB – 46.7%)

マジかよ、これ。

gulp 2

コピーして転送

var gulp = require('gulp');

gulp.task('html', function(done){
	gulp.src('./src/index.html')
		.pipe(gulp.dest('./dest'))
	done();
});

gulp.task('default', gulp.task('html'));

複数のタスクを実行する際には、gulp.seriesと書く

gulp.task('default', gulp.series('html','msg'));

var gulp = require('gulp');

gulp.task('html', function(done){
	gulp.src('./src/index.html')
		.pipe(gulp.dest('./dest'))
	done();
});

gulp.task('img', function(done){
	gulp.src('./src/img/*.png')
		.pipe(imagemin())
		.pipe(gulp.dest('./dest/img'))
	done();
});

gulp.task('default', gulp.series('html','img'));

変換して圧縮はwebpackのJS minifyと一緒か。

gulp 1

gulpとは？
-> Node.jsをベースとしたビルトシステムヘルパー、タスクランナー
-> ブラウザの自動更新もタスクとして処理できる
https://gulpjs.com/

ん？webpackと同じ？ビルトインがある分、webpackの方が高機能か。

gulp install
$ sudo npm i -g gulp
$ gulp -v
CLI version: 2.2.0
$ npm init

gulpfile.js

var gulp = require('gulp');

gulp.task('hello', function(done){
	console.log("hello world");
	done();
});

gulpの3系と4系だと引数の渡し方が異なるようです。

var gulp = require('gulp');

gulp.task('hello', function(done){
	console.log("hello world");
	done();
});

gulp.task('default', gulp.task('hello'));

gulpで Use of const in strict mode.

node.jsのバージョンが低いのが原因
node.js 10.7.0を使って、gulpをもう一度実行します。

[vagrant@localhost front]$ node -v
v0.10.48
[vagrant@localhost front]$ nvm use 10.7.0
-bash: nvm: コマンドが見つかりません
[vagrant@localhost front]$ source ~/.nvm/nvm.sh
[vagrant@localhost front]$ nvm ls
-> v10.7.0
system
default -> 10.7.0 (-> v10.7.0)
node -> stable (-> v10.7.0) (default)
stable -> 10.7 (-> v10.7.0) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/carbon (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.14.3 (-> N/A)
lts/carbon -> v8.11.3 (-> N/A)
[vagrant@localhost front]$ nvm use 10.7.0
Now using node v10.7.0 (npm v6.1.0)
[vagrant@localhost front]$ node -v
v10.7.0
[vagrant@localhost front]$ gulp
[21:12:57] Using gulpfile ~/local/front/gulpfile.js
[21:12:57] Starting ‘html’…
[21:12:57] Finished ‘html’ after 14 ms
[21:12:57] Starting ‘img’…
[21:12:57] Finished ‘img’ after 7.34 ms
[21:12:57] Starting ‘default’…
[21:12:57] Finished ‘default’ after 40 μs
[21:13:01] gulp-imagemin: Minified 1 image (saved 1.48 kB – 11.1%)

OK!

で、何やるのって、sassのコンパイルをgulpで自動化したいのでござる。