Gulp实现SASS、HTML的监控和自动编译以及页面的自动刷新

最新推荐文章于 2022-07-31 21:42:06 发布

weixin_34331102

最新推荐文章于 2022-07-31 21:42:06 发布

阅读量210

点赞数

文章标签： git json 前端 ViewUI

原文链接：https://my.oschina.net/keysITer/blog/785980

版权

2019独角兽企业重金招聘Python工程师标准>>>

Gulp是一款当前很流行的前端自动化构建工具

功能

先说明一下本文所要实现的功能：

gulp本地服务器
多个sass文件汇总为一个css并压缩
自动监控和编译SASS和HTML文件
HTML文件修改后保存则自动刷新页面显示。

配置

首先在项目目录下面创建package.json和gulpfile.js两个文件。

看一下本地的项目目录结构：

package.json

{
    "name": "exam",
    "version": "1.0.0",
    "description": "examWeb",
    "main": "gulpfile.js",
    "dependencies": {},
    "devDependencies": {
        "gulp": "^3.9.0",
        "gulp-connect": "^2.3.1",
        "gulp-sass": "^2.3.2",
        "gulp-rename": "^1.2.2",
        "gulp-minify-css": "^1.2.4",
    },
    "scripts": {
        "test": "test"
    },
    "repository": {
        "type": "git",
        "url": "https://git.coding.net/xxx/xxx.git"
    },
    "keywords": [
        "exam",
        "angular",
        "web",
        "bootStrap"
    ],
    "author": "Simon Zhang",
    "license": "ISC"
}

devDependencies就是所需要的插件
repository.url是项目的git地址，也可不填

gulpfile.js

备注直接写在文件里了：

var gulp = require('gulp');
var connect = require('gulp-connect');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
//以上是项目需要引入的插件

var buildConfig = {
    IS_RELEASE_BUILD: true,
    styleDir: 'web/css',//导出的css目录
    htmlDir: 'web/**/*.html',//监控的HTML文件
    watchSass: 'web/**/*.scss'//监控的sass文件  **表示所有
};

gulp.task('server', function() {
    connect.server({
        livereload: true  //实时刷新
    });
});

gulp.task('start', ['server', 'watch-sass', 'watch-html']);
gulp.task('default', ['server', 'watch-sass', 'watch-html']);

gulp.task('watch-sass', ['sass'], function(donw) {
    gulp.watch(buildConfig.watchSass, ['sass']);
    console.log("====== watching hec sass files... =====");
});

gulp.task('sass', function(done) {
    gulp.src("web/exam.scss")
        .pipe(sass())
        .pipe(gulp.dest(buildConfig.styleDir))
        .pipe(minifyCss({
            keepSpecialComments: 0
        }))
        .pipe(rename({
            extname: '.min.css'
        }))
        .pipe(gulp.dest(buildConfig.styleDir))
        .on('end', done);
});

gulp.task('watch-html', function() {
    gulp.watch(buildConfig.htmlDir, ['html']);
});

gulp.task('html', function() {
    gulp.src(buildConfig.htmlDir)
        .pipe(connect.reload());
});