gulp的配置文件
程序员文章站
2022-06-07 13:20:21
...
1. 全局安装 gulp:
$ npm install --global gulp
2. 作为项目的开发依赖(devDependencies)安装:
$ npm install --save-dev gulp
3. 在项目根目录下创建一个名为 gulpfile.js 的文件:
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. 运行 gulp:
$ gulp
上一篇: Java foreach原理