欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

相关标签: gulp