babelとsassをgulpから使うメモ
gulpfile.jsのメモ。
(Sassとbabelが欲しい時に)
gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require("gulp-plumber");
var babel = require("gulp-babel");
gulp.task('sass', function() {
return gulp.src('./assets/sass/**/*.scss')
.pipe(plumber())
.pipe(sass({outputStyle: 'expanded'}))
.pipe(autoprefixer({
browsers: ["last 2 versions", "ie >= 9", "Android >= 4","ios_saf >= 8"],
cascade: false
}))
.pipe(gulp.dest('./assets/css'));
});
gulp.task("babel", function () {
return gulp.src("./assets/es6/**/*.js")
.pipe(babel({presets: ['es2015']}))
.pipe(gulp.dest("./assets/js"));
});
gulp.task('default', function() {
gulp.watch('./assets/sass/**/*.scss', ['sass']);
gulp.watch('./assets/es6/**/*.js', ['babel']);
});
package.json
{
"name": "site_template",
"version": "1.0.0",
"description": "template",
"homepage": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.1.0",
"gulp-babel": "^7.0.1",
"gulp-plumber": "^1.2.0",
"gulp-sass": "^3.1.0"
}
}
「gulp」で監視開始。
Author And Source
この問題について(babelとsassをgulpから使うメモ), 我々は、より多くの情報をここで見つけました https://qiita.com/aaaaaaaaaaaaaaaaaaaaaaaaaaa/items/0027b3db288233073da7著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .