gulp基础插件以及基本配置

2019-05-08  本文已影响0人  萤火虫de梦
var gulp = require('gulp');
var borwserSycn = require('browser-sync').create();
var reload = borwserSycn.reload;
var sourcemaps  = require('gulp-sourcemaps');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var cleanCss = require('gulp-clean-css');



/*自动刷新*/
gulp.task("service",function(done){
    
    borwserSycn.init({
        server:{
            baseDir:'./src/',
            index:"app.html"
        },
        port:8000,
        host: "192.168.1.36",
        notify:false,
    });
    done();
});


/*导入公共文件*/
// gulp.task("public",function(){
//  return gulp.src(["src/public/**","!src/public/sass/**"])
//   .pipe(gulp.dest("build/public/"));
// });

/*html任务*/
// gulp.task("html",function(){
//  return gulp.src(["src/**/*.html","!src/public/**"])
//  .pipe(gulp.dest("build/"));
// });
/*任务监听*/
gulp.task('watchs',function(){
    gulp.watch('src/public/sass/*.scss',gulp.series('sass',"cleanCss"))
.on('change',reload);
    //gulp.watch(['src/**/*.html','!src/public/**'],gulp.parallel("html",'public'))
    //  .on('change',reload);

    gulp.watch(['src/**/*.html','!src/public/**']).on('change',reload);
   
});
/*压缩css*/
gulp.task("cleanCss",function(){
    gulp.src('src/public/css/**')
    .pipe(cleanCss())
    .pipe(gulp.dest('build/public/css/'));
});

/*sass任务*/
gulp.task("sass",function(){
    console.log("sass编译成功");
    return   gulp.src('src/public/sass/*.scss')
            .pipe(autoprefixer({
                browsers: [
                    'last 2 versions',
                    'last 1 Chrome versions',
                    'last 2 Explorer versions',
                    'last 3 Safari versions',
                    'Firefox >= 20',
                    '> 5%',
                    'Firefox ESR'
                    ],
                remove:false
            }))
            .pipe(sass().on('error', sass.logError))
            .pipe(sourcemaps.init())
            .pipe(sourcemaps.write('./maps'))
            .pipe(gulp.dest('src/public/css/'));
});


/*启动*/
gulp.task("default",gulp.series("service",gulp.parallel("watchs")));

上一篇下一篇

猜你喜欢

热点阅读