gulp.js

2019-01-24  本文已影响0人  moly琴

文件,可复用

var gulp = require('gulp');
// 3.X版本 3.9.1
//引入第三方模块
var less=require("gulp-less");
var sass = require('gulp-sass');
var path=require("path");
var cleanCSS=require("gulp-clean-css");
var rename=require("gulp-rename");
var uglify=require("gulp-uglify");
var browserSync = require('browser-sync');

//配置less编译任务
gulp.task("less",function () {
    gulp.src("assets/styles/*.less") //源目录
    .pipe(less({
        paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(gulp.dest("dist/css")); //输出目录
});

//配置sass编译任务
gulp.task("sass",function () {
    gulp.src("assets/styles/*.scss") //源目录
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest("dist/css")); //输出目录
});

//配置压缩css的任务
gulp.task("minCss",function () {
    gulp.src("dist/css/*.css") //源目录
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(rename({
        suffix:".min" //重命名加min后缀
    }))
    .pipe(gulp.dest("dist/css/min")); //输出目录
});

//配置js压缩的任务
gulp.task("uglifyJs",function () {
    gulp.src("src/*.js") //源目录
    .pipe(uglify()) //执行压缩
    .pipe(rename({
        suffix: ".min"   //执行重命名
    })) 
    .pipe(gulp.dest("dist/js")); //输出目录
});

//开启观察者watch
gulp.task("default",function () {
    
    gulp.watch("assets/styles/*.less",["less"]); //观察less变化执行less编译任务
    // gulp.watch("assets/styles/*.scss",["sass"]); //观察sass变化执行sass编译任务
    // gulp.watch("dist/css/*.css",["minCss"]); //观察css变化执行css压缩任务
    // gulp.watch("src/*.js",["uglifyJs"]); //观察js变化执行js压缩任务
    
     //架设静态服务器
    browserSync.init({
        files:['**/*.css','**/*.html','**/*.js'],   //监听指定文件类型,自动刷新浏览器
        server:{
            baseDir:'./', // 设置服务器的根目录
            index:'index.html' // 指定默认打开的文件
        },
        port:8888 // 指定访问服务器的端口号
    });
    
    

});
上一篇 下一篇

猜你喜欢

热点阅读