zoukankan      html  css  js  c++  java
  • 使用gulp管理sass文件

    前提是npm和ruby已经安装好

    1. 新建文件夹myproject,cd进入文件夹 再npm init 初始化

    2.npm install gulp --save-dev 为项目添加gulp,并将gulp添加到 package.json文件中。

    3.npm install gulp-sass gulp-clean-css --save-dev gulp-autoprefixer gulp-uglify为项目添加gulp-sass和gulp-clean-css、gulp-autoprefixer,并将gulp-sass gulp-clean-css 、gulp-autoprefixer添加到 package.json文件中。

    4. 然后编写gulpfile.js文件

    var gulp = require('gulp'),
        sass = require('gulp-sass'),
        cleanCss = require('gulp-clean-css'),
        autoprefixer = require('gulp-autoprefixer'),
        htmlmin = require('gulp-htmlmin'),
        uglify = require('gulp-uglify');
    
    gulp.task('sass', function () {
        return gulp.src('./src/sass/*.scss')
            .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
            .pipe(autoprefixer())
            .pipe(cleanCss())
            .pipe(gulp.dest('./app/css'));
    });
    
    gulp.task('htmlmin', function () {
        return gulp.src('./src/*.html')
            .pipe(htmlmin({collapseWhitespace: true}))
            .pipe(gulp.dest('./app'));
    });
    
    gulp.task('uglify', function () {
        return gulp.src('./src/js/*.js')
            .pipe(uglify())
            .pipe(gulp.dest('./app/js'));
    })
    
    gulp.task('watch', function () {
        gulp.watch('./src/sass/*.scss', ['sass']);
        gulp.watch('./src/*html', ['htmlmin']);
        gulp.watch('./src/js/*.js', ['uglify']);
    });
    
    gulp.task('default', ['sass', 'htmlmin', 'uglify', 'watch'], function () {
        console.log('gulp succeed');
    });

    5. 命令行运行gulp,即可根据scss文件的改变,自动解析及压缩为css文件

    ---------------------------------------------------------------------------------

    6. npm i gulp-htmlmin --save-dev 安装对html的压缩

  • 相关阅读:
    UE4免费了
    c# 下 根据Datatable的结构动态创建表
    SharePoint 调用 WebService操作List小记
    同步SharePoint List数据到关系数据库
    如何提升SharePoint 2010的性能
    DataX的使用
    C#调用RabbitMQ实现消息队列
    在SharePoint2010上使用QuickFlow和QuickFlowDesigner
    QUICKFLOW安装
    如何设置IIS程序池的回收时间,才能最大程度的减少对用户的影响?
  • 原文地址:https://www.cnblogs.com/viola-sh/p/6525990.html
Copyright © 2011-2022 走看看