1. Global installation gulp:
Npm install --global GULP $
2. As development projects dependent (devDependencies) installation:
$ npm install --save-dev GULP
3. Create a file called gulpfile.js in the project root directory:
var gulp = require('gulp'),
// concat = require('gulp-concat'),
// uglify = require('gulp-uglify'),
browserSync = require('browser-sync').create(),
fileinclude = require('gulp-file-include'),
// minifyCss = require('gulp-minify-css'),
sass = require('gulp-sass')
gulp.task('sass', function() {
return gulp.src('src/sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('public/css'));
});
gulp.task('html', function() {
gulp.src(['src/html/**/*.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: 'src/html'
}))
.pipe(gulp.dest('public/html'));
});
// 将所有css文件连接为一个文件并压缩,存到public/css
gulp.task('concatCss', function() {
gulp.src(['src/css/*.css'])
// .pipe(concat('main.css'))
// .pipe(minifyCss())
.pipe(gulp.dest('public/css'));
});
// 默认任务
gulp.task('default', ['watch']);
// 监听任务
gulp.task('watch', function() {
// 建立浏览器自动刷新服务器
browserSync.init({
server: {
baseDir: "public",
index: "html/index.html" //自动跳转到此页
}
});
gulp.watch('src/css/*.css', ['concatCss']);
// gulp.watch('src/sass/**/*.scss', ['sass']);
gulp.watch('src/js/*.js', ['concatJs']);
gulp.watch('src/**/*.html', ['html']);
// 自动刷新
gulp.watch('public/**', function() {
browserSync.reload();
});
});
4. Run gulp:
$ gulp