gulp4 - 项目中既有css文件也有scss文件？怎么把scss转成css然后压缩css文件？

Question

文件目录是这样的

const gulp = require('gulp');//引入gulp  
const htmlMin = require('gulp-htmlmin');//引入html压缩模块  
const autoprefixer = require('gulp-autoprefixer');
const cleanCss = require('gulp-clean-css') //引入css压缩模块
const babel = require('gulp-babel'), //引入es6转es5模块
    uglify = require('gulp-uglify') //引入js压缩模块
const connect = require('gulp-connect');
const webserver = require('gulp-webserver');
const proxy = require('http-proxy-middleware');

// 方便路径管理
const path = {
    html: {
        src: 'src/**/*.html',
        dest: 'dist'
    },
    css: {
        src: 'src/**/*.css',
        dest: 'dist'
    },
    js: {
        src: 'src/**/*.js',
        dest: 'dist'
    }
}

/** 
 * 创建任务，并命名任务名
 * 一个*表示所有文件，两个*表示所有目录
 */
const htmlCompress = () => {
    return gulp.src(path.html.src)
        .pipe(htmlMin({
            removeComments: true,//清除HTML注释
            collapseWhitespace: true,//压缩HTML
            collapseBooleanAttributes: true,//压缩布尔属性的值
            removeEmptyAttributes: true,//删除所有空格作属性值
            removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"  
            minifyJS: true,//压缩页面JS  
            minifyCSS: true //压缩页面css
        })).pipe(gulp.dest(path.html.dest)) //指定压缩文件放置的目录
}
const cssCompress = () => {
    return gulp.src(path.css.src)
        .pipe(autoprefixer({
            cascade: false
        }))
        .pipe(cleanCss())
        .pipe(gulp.dest(path.css.dest))
}

const jsCompress = () => {
    return gulp.src(path.js.src)
        .pipe(babel({
            presets: ['@babel/env'] //es6转es5
        }))
        .pipe(uglify()) //执行压缩
        .pipe(gulp.dest(path.js.dest))
}

const watch = () => {//监听文件，文件改变执行对应的任务
    gulp.watch(path.html.src, htmlCompress)
    gulp.watch(path.html.src, cssCompress)
    gulp.watch(path.js.src, jsCompress)
}

// const server = () => {
//     // 创建服务器
//     connect.server({
//         root: 'dist',//根目录
//         port: '2000',//端口号  
//         livereload: true //服务器热更新
//     })
// }

const createServer = () => {
    return gulp.src('./dist')
        .pipe(webserver({ //创建服务器
            port: '3000', //端口号
            host: 'xxx.xxx.xxx.xxx',
            open: '/dark-rankings.html', //默认打开路径
            livereload: true, //热更新
            middleware: [
                proxy.createProxyMiddleware('/api', { //创建反向代理，请求已 /api 开头就使用target的服务器
                    target: 'http://xxx.xxx.xxx.xxx',
                    changeOrigin: true
                })
            ]
        })).pipe(connect.reload())
}

/* 以对象形式导出 */
/* 同时运行多个任务 */
module.exports.default = gulp.series(gulp.parallel(htmlCompress, cssCompress, jsCompress, watch, createServer));

Answer 1

给你说个简单的。vscode有个scss-to-css。直接转化。简单粗暴好用

Answer 2

安装一下 gulp-sass 和 sass

npm i -D gulp-sass sass

const gulp = require('gulp');//引入gulp  
const htmlMin = require('gulp-htmlmin');//引入html压缩模块  
const autoprefixer = require('gulp-autoprefixer');
const cleanCss = require('gulp-clean-css') //引入css压缩模块
const babel = require('gulp-babel'), //引入es6转es5模块
    uglify = require('gulp-uglify') //引入js压缩模块
const connect = require('gulp-connect');
const webserver = require('gulp-webserver');
const proxy = require('http-proxy-middleware');
+ const sass = require('gulp-sass')(require('sass'))
// 方便路径管理
const path = {
    html: {
        src: 'src/**/*.html',
        dest: 'dist'
    },
    css: {
-       src: 'src/**/*.css',
+       src: 'src/**/*.{css,scss}',
        dest: 'dist'
    },
    js: {
        src: 'src/**/*.js',
        dest: 'dist'
    }
}

/** 
 * 创建任务，并命名任务名
 * 一个*表示所有文件，两个*表示所有目录
 */
const htmlCompress = () => {
    return gulp.src(path.html.src)
        .pipe(htmlMin({
            removeComments: true,//清除HTML注释
            collapseWhitespace: true,//压缩HTML
            collapseBooleanAttributes: true,//压缩布尔属性的值
            removeEmptyAttributes: true,//删除所有空格作属性值
            removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"  
            minifyJS: true,//压缩页面JS  
            minifyCSS: true //压缩页面css
        })).pipe(gulp.dest(path.html.dest)) //指定压缩文件放置的目录
}
const cssCompress = () => {
    return gulp.src(path.css.src)
+       .pipe(sass())
        .pipe(autoprefixer({
            cascade: false
        }))
        .pipe(cleanCss())
        .pipe(gulp.dest(path.css.dest))
}

const jsCompress = () => {
    return gulp.src(path.js.src)
        .pipe(babel({
            presets: ['@babel/env'] //es6转es5
        }))
        .pipe(uglify()) //执行压缩
        .pipe(gulp.dest(path.js.dest))
}

const watch = () => {//监听文件，文件改变执行对应的任务
    gulp.watch(path.html.src, htmlCompress)
    gulp.watch(path.html.src, cssCompress)
    gulp.watch(path.js.src, jsCompress)
}

// const server = () => {
//     // 创建服务器
//     connect.server({
//         root: 'dist',//根目录
//         port: '2000',//端口号  
//         livereload: true //服务器热更新
//     })
// }

const createServer = () => {
    return gulp.src('./dist')
        .pipe(webserver({ //创建服务器
            port: '3000', //端口号
            host: 'xxx.xxx.xxx.xxx',
            open: '/dark-rankings.html', //默认打开路径
            livereload: true, //热更新
            middleware: [
                proxy.createProxyMiddleware('/api', { //创建反向代理，请求已 /api 开头就使用target的服务器
                    target: 'http://xxx.xxx.xxx.xxx',
                    changeOrigin: true
                })
            ]
        })).pipe(connect.reload())
}

/* 以对象形式导出 */
/* 同时运行多个任务 */
module.exports.default = gulp.series(gulp.parallel(htmlCompress, cssCompress, jsCompress, watch, createServer));

---

NOTE: 这样处理时，CSS 文件也会参与 SASS 的处理，如果 CSS 中编写了 SASS 的语法，也是会被处理的，大部分情况下应该都没啥问题。如果不需要，则要考虑对 SASS 新开一个任务。或者考虑使用 gulp-filter 等

Answer 3

安装 gulp-sass 插件：

npm install gulp-sass --save-dev

然后，你可以在你的 Gulp 配置文件中引入 gulp-sass 插件：

const sass = require('gulp-sass')(require('sass'));

然后，你新建一个新的 Gulp 任务来处理你的 SCSS 文件：

const scss = {
    src: 'src/**/*.scss',
    dest: 'dist'
}

const scssCompile = () => {
    return gulp.src(scss.src)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(scss.dest));
}

然后，你把这个任务添加到你的默认任务列表里：

module.exports.default = gulp.series(gulp.parallel(htmlCompress, scssCompile, cssCompress, jsCompress, watch, createServer));

scssCompile 任务在 cssCompress 任务之前运行，这样 cssCompress 任务才能找到并压缩新生成的 CSS 文件。
最后：

const watch = () => {//监听文件，文件改变执行对应的任务
    gulp.watch(path.html.src, htmlCompress)
    gulp.watch(scss.src, scssCompile)
    gulp.watch(path.css.src, cssCompress)
    gulp.watch(path.js.src, jsCompress)
}