gulp的配置文件

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

猜你喜欢

转载自blog.csdn.net/qq_36711388/article/details/89853589