スニペット/gulp
#コマンドプロンプトでディレクトリへ移動後、package.jsonを作成
npm init
#gulpをローカルインストール
npm install gulp –save-dev
#プラグインをローカルインストール
npm install browser-sync gulp-sass gulp-autoprefixer gulp-plumber –save-dev
#gulpfile.jsを作成
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | var gulp = require('gulp'), autoPre = require("gulp-autoprefixer"), // ベンダープレフィックス bSync = require('browser-sync'), // ライブリロード plumber = require('gulp-plumber'), // 強制終了防止 sass = require('gulp-sass') // Sass ; // ライブリロード gulp.task('browser-sync', function() { bSync({ server: { baseDir: "./html" } }); }); gulp.task('bs-reload', function() { bSync.reload() }); // Sass, ベンダープレフィックス gulp.task('sass', function() { gulp.src('./html/scss/**/*.scss') .pipe(plumber()) .pipe(sass({outputStyle: 'expanded'})) .pipe(autoPre({ browsers: ['last 2 versions', 'ie 10'], cascade: false })) .pipe(gulp.dest('./html/css/') ) .pipe(bSync.reload({stream:true}) ); }); // HTML gulp.task('html', function() { gulp.src('./html/**/*.html') .pipe(plumber()) .pipe(gulp.dest('./html/**/*.html') ) .pipe(bSync.reload({stream:true}) ); }); // JavaScript gulp.task('js', function() { gulp.src('./html/**/*.js') .pipe(plumber()) .pipe(gulp.dest('./html/js') ) .pipe(bSync.reload({stream:true}) ); }); // ファイル監視 gulp.task('default', ['browser-sync'], function() { gulp.watch("html/**/*.scss", ['sass']); gulp.watch("html/**/*.html", ['bs-reload']); gulp.watch("html/**/*.js", ['bs-reload']); }); |
コメントを投稿する