- 2024/11/21
- 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}