- 2025/11/29
- Category :
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

ステップアップしていくブログです。
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
$ cd project_dir
$ mkdir -p src/scss
$ mkdir -p public/assets/css
$ cat src/css/style.scss
$bgcolor: #efefef;
body {
background: $bgcolor;
}
$ cat gulpfile.js
'use strict';
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var es = require('event-stream');
var sass = require('gulp-sass');
gulp.task('script', function(callback) {
var sc = gulp.src(['src/js/*.js'])
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('public/assets/js'));
var br = browserify({
debug: true,
entries: ['public/assets/js/all.js']
}).bundle()
.pipe(source('all.js'))
.pipe(gulp.dest('public/assets/js'));
return es.merge(sc, br);
});
gulp.task('style', function(callback) {
return gulp.src(['src/scss/*.scss'])
.pipe(sass())
.pipe(gulp.dest('public/assets/css'));
});
gulp.task('hoge', function(callback) {
console.log('hoge');
});
gulp.task('default', ['script', 'style']);
$ npm install --save-dev gulp-sass
$ gulp
$ cat public/assets/css/style.css
body {
background: #efefef; }
$ npm install --save-dev gulp-pleeease
$ cat src/scss/style.scss
$bgcolor: #efefef;
body {
background: $bgcolor;
}
.box {
display: flex;
}
$ cat gulpfile.js
...
var pleeease = require('gulp-pleeease');
...
gulp.task('style', function(callback) {
return gulp.src(['src/scss/*.scss'])
.pipe(sass())
.pipe(pleeease())
.pipe(gulp.dest('public/assets/css'));
});
…
$ cat public/assets/css/style.css
body {
background: #efefef; }
.box {
display: flex; }
$ cat public/assets/css/style.css
body{background:#efefef}.box{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}