際際滷

Gulpことはじめ
Kyohei Morimoto

Gruntの�}�j晒
? Gruntは弼？できそう�
? みんなでプラグインをいっぱい恬った�
? おれのかんがえるさいきょうgruntfileが岱羨
? gruntfileの�}�j晒
�C 砿尖できない、�iめない
�C �嘛��悗�覆�
? Gulpの�Q伏

＾Speed. Efficiency. Simplicity.￣

Gulpの兵め圭
sudo npm install -g npm
sudo npm install -g gulp
npm init
npmのアップデ�`ト
gulpのインスト�`
ル
package.jsonの恬撹(もちろん返�咾任�OK)

Gulpの兵め圭
sudo npm install gulp@x.x.x --save-
dev
x.x.xのところは、インスト�`ルしたCLIのバ�`ジョン
に
栽わせる

gulpfile.jsを��┘織好��
? 児云議な送れはgruntと匯�w
1. �iみ�zむプラグインを恷兜に�峰
2. 佩いたい�I尖を��sassのコンパイルとか�
3. 恬ったものを�g佩する

�I尖の��Ⅲ�
stream侘塀で��

streamについて
? gulp�_�k宀�_による盾�h��△蠅泙�
? �しくは、substack's stream handbook

streamについて
? gulp.src() //荷恬するファイルを峺協する
? .pipe(プラグイン兆) //佩いたい�I尖を��
? .pipe(gulp.dest()); //竃薦したいファイルを
しているする

sassのコンパイル
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('htdocs/sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('./htdocs/css'));
});
gulp.task('default', ['sass']);

プラグイン方
? この2カ埖でGulpのプラグイン方は蔚になっ
ている
? 寄丘フロントエンドでやりたいことは、畠隼で
きるから寄きな�oい

�g佩�I尖
? gulpは壼いらしい�
だが、悶湖ではそれほど蛍からなかった�
＾By harnessing the power of node's streams you
get fast builds that don't write intermediary files
to disk. - gulpjs.com￣
? GruntもV0.5で壼くなるっぽい
https://github.com/gruntjs/grunt-docs/blob/master/Roadmap.md

�O協ファイルの�}�jさ
? CSS
�C オ�`トプレフィックス
�C ファイルの�Y栽
�C �R�s
? 鮫�
�C �R�s
? ファイルの�O�

module.exports = function(grunt) {
grunt.initConfig({
paths: {
css: 'htdocs/css/',
cssdist: 'htdocs/dist/css/',
img: 'htdocs/img/',
imgdist: 'htdocs/dist/img/'
},
autoprefixer: {
options: {
browsers: ['last 2 version']
},
files: {
expand: true,
flatten: true,
src: '<%= paths.css %>*.css',
dest: '<%= paths.cssdist %>pre/'
}
},
cssmin: {
compress: {
files: {
'<%= paths.cssdist %>style.min.css': ['<%= paths.cssdist %>pre/*.css']
}
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: '<%= paths.img %>',
src: '**/*.{jpg,gif}',
dest: '<%= paths.imgdist %>'
}]
}
},
pngmin: {
compile: {
options: {
ext: '.png'
},
files: [{
expand: true,
src: '**/*.png',
}]
}
},
watch: {
css:{
files: ['<%= paths.css %>*.css'],
tasks: ['autoprefixer', 'cssmin']
},
img:{
files: ['<%= paths.img %>**/*.{png,jpg,gif}'],
tasks: ['imagemin', 'pngmin']
}
}
});
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-pngmin');
grunt.registerTask('default', ['autoprefixer', 'cssmin', 'imagemin', 'pngmin']);
};

grunt.initConfig({
paths: {
css: 'htdocs/css/',
img: 'htdocs/img/',
},
autoprefixer: {
options: {
},
files: {
expand: true,
flatten: true,
}
},
cssmin: {
compress: {
files: {
}
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
}]
}
},
pngmin: {
compile: {
options: {
ext: '.png'
},
files: [{
expand: true,
src: '**/*.png',
}]
}
},
watch: {
css:{
},
img:{
}
}
});
};
67佩

grunt.initConfig({
paths: {
css: 'htdocs/css/',
img: 'htdocs/img/',
},
autoprefixer: {
options: {
},
files: {
expand: true,
flatten: true,
}
},
cssmin: {
compress: {
files: {
}
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
}]
}
},
pngmin: {
compile: {
options: {
ext: '.png'
},
files: [{
expand: true,
src: '**/*.png',
}]
}
},
watch: {
css:{
},
img:{
}
}
});
};
29佩

�Y蕉どうなのよ
? 房っていたよりずっと聞いやすい
? �I尖が�R宜議に�やすい
? チ�`ムメンバ�`によっては��襪靴討澆討眩�
いかも
? ビルドツ�`ルはあくまで返粁なので、
朕議に栽わせて�x�kをする

際際滷

Gulp ことはじめ

More Related Content

Gulp ことはじめ