gulp

CSS Sprite自動生成(gulp.spritesmith)

More than 1 year has passed since last update.


gulp.spritesmith


  • CSS Spriteとそれに対応した scssファイルを生成する。

https://github.com/twolfson/gulp.spritesmith


サンプル表示

スクリーンショット 2016-09-23 15.54.30.png


手順


パッケージをインストール

$ npm install


sprite画像の生成


  • spriteにしたい画像をimagesの中に入れる

$ gulp sprite


  • sprite.pngが生成される

  • _sprite.scssが生成される

スクリーンショット 2016-09-23 15.56.00.png


gulpの実行

$ gulp


style.sassを編集・保存


style.sass

//生成されたspriteを読み込む指定

@import "sprite";

//使いたい画像を読み込む指定(ここでは、引数に、「$sprite-」+画像のファイル名を書く)

.使いたいクラス名{
@include sprite($sprite-cat);
}



  • style.css.mapが生成

  • style.cssが生成

スクリーンショット 2016-09-23 16.01.01.png


gulpfileサンプル


gulpfile.js


var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');
var sass = require('gulp-sass');
var browser = require("browser-sync");
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('default',['server'],function() {
gulp.watch('htdocs/sass/*.scss', ['sass']);
});
gulp.task('sass',function () {
gulp.src('htdocs/sass/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(autoprefixer("last 2 version", "ie 8", "ie 7"))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('htdocs/css/'))
.pipe(browser.reload({stream:true}));
});

gulp.task("server", function() {
browser({
server: {
baseDir: "htdocs/"
}
});
});

gulp.task('sprite', function () {
var spriteData = gulp.src('htdocs/images/*.png').pipe(spritesmith({
imgName: 'sprite.png',
cssName: '_sprite.scss',
imgPath: '../images/sprite/sprite.png',
cssFormat: 'scss',
cssVarMap: function (sprite) {
sprite.name = 'sprite-' + sprite.name;
}
}));
spriteData.img
.pipe(gulp.dest('htdocs/images/sprite/'));
spriteData.css
.pipe(gulp.dest('htdocs/sass/'));
});



style.scss


@import "sprite";

body{
padding:50px 0 0 50px;
}
div{
margin-bottom:20px;
}
h1{
font-size:30px;
margin:0 0 50px 0;
}

.icon1::before{
@include sprite($sprite-icon1);
content: "";
margin:-3px 10px 0 0;
display: inline-block;
vertical-align: middle;
}
.icon2::before{
@include sprite($sprite-icon2);
content: "";
margin:-3px 10px 0 0;
display: inline-block;
vertical-align: middle;
}
.icon3::before{
@include sprite($sprite-icon3);
content: "";
margin:-3px 10px 0 0;
display: inline-block;
vertical-align: middle;
}
.cat{
@include sprite($sprite-cat);
}



index.html


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>gulp.spritesmithテスト</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>gulp.spritesmithテスト</h1>

<div class="icon1">アイコン1</div>
<div class="icon2">アイコン2</div>
<div class="icon3">アイコン3</div>
<div class="cat"></div>
</body>
</html>