gulp
ファイルフィルターの使用。
サーチ…
ファイルを注文するためのイメージ、JS、およびCSS(SASS)ルールの作成
Gulpとそのタスクのインストール
$ npm install gulp --save-dev
$ npm install gulp-sass --save-dev
$ npm install gulp-uglify --save-dev
$ npm install gulp-imagemin --save-dev
フォルダ構造の決定
この構造では、開発用にappフォルダを使用しますが、distフォルダは運用サイト用に最適化されたファイルを格納するために使用されます。
|-app
|-css/
|-images/
|-index.html
|-js/
|-scss/
|- dist/
|- gulpfile.js
|- node_modules/
|- package.json
グループ前処理
// Requires the gulp-sass plugin
var gulp = require('gulp');
sass = require('gulp-sass');
uglify = require('gulp-uglify');
imagemin = require('gulp-imagemin');
ガルフタスク
gulp.task('sass', function(){
return gulp.src('app/scss/**/*.scss') //selection all files in this derectory
.pipe(sass()) // Using gulp-sass
.pipe(gulp.dest('dist'))
});
gulp.task('gulp-uglify', function(){
return gulp.src('app/js/*.js')
// Minifies only if it's a JavaScript file
.pipe(uglify())
.pipe(gulp.dest('dist'))
});
gulp.task('images', function(){
return gulp.src('app/images/**/*.+(png|jpg|gif|svg)')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
});
ギャルップウォッチ
gulp.task('watch', function(){
gulp.watch('app/js/**/*.js', ['gulp-uglify']);
gulp.watch('app/scss/**/*.scss', ['sass']);
gulp.watch('app/images/**/*.*', ['images']);
// Other watchers
});
gulp.task('build', [`sass`, `gulp-uglify`, `images`], function (){
console.log('Building files');
});
gulp.task('default', function() {});
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow