目錄
安裝
npm install gulp-cli npm install gulp -D
創建 gulpfile.js 檔案
var gulp = require('gulp');
var pug = require('gulp-pug');
var less = require('gulp-less');
var minifyCSS = require('gulp-csso');
gulp.task('html', function(){
return gulp.src('client/templates/*.pug')
.pipe(pug())
.pipe(gulp.dest('build/html'))
});
gulp.task('css', function(){
return gulp.src('client/templates/*.less')
.pipe(less())
.pipe(minifyCSS())
.pipe(gulp.dest('build/css'))
});
gulp.task('default', [ 'html', 'css' ]);
排除目錄
gulp.src(['js/**/*.js', '!js/**/*.min.js'])
// npm install --save-dev gulp gulp-changed gulp-jscs gulp-uglify
var gulp = require('gulp');
var changed = require('gulp-changed');
var jscs = require('gulp-jscs');
var uglify = require('gulp-uglify');
var SRC = 'src/**/*.js';
var DEST = 'dist';
gulp.task('default', function() {
return gulp.src(SRC)
.pipe(changed(DEST)) // changed 任務需要提前知道目標目錄位置才能找出哪些檔案是被修改過的,只有被更改過的檔案才會通過這裡
.pipe(jscs())
.pipe(uglify())
.pipe(gulp.dest(DEST));
});
顯示處理中的檔案
gulp.task('minify-css', function () {
gulp.src([src + '/**/css/**/*.css', "!"+src + '/**/css/**/*.min.css'])
.on('data', function(file) {
console.log('%s Read %d bytes of data', file.path, file.contents.length);
})
.pipe(concat("finally.css"))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest( dist ));
});
npm install --save-dev gulp-notify
var notify = require('gulp-notify');
.pipe(notify({ message: 'Styles task complete' }));
var gulp = require('gulp');
var del = require('del');
gulp.task('clean:mobile', function (cb) {
del([
'dist/**/css/*.min.css',
'dist/mobile/**/*',
'!dist/mobile/deploy.json'
], cb);
});
gulp.task('default', ['clean:mobile']);
// Clean
gulp.task('clean', function() {
return del(['dist/styles', 'dist/scripts', 'dist/images']);
});