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的压缩

  • 相关阅读:
    蓝桥杯 算法训练 最大的算式
    hdu 5389 Zero Escape
    hdu 2577 How to Type
    java设计模式之命令模式
    java设计模式之策略模式
    Java四种引用包括强引用,软引用,弱引用,虚引用
    Java 面试参考指南 — 同步
    Java面试通关要点
    基于注解的 Spring MVC(上)
    69道Spring面试题和答案
  • 原文地址:https://www.cnblogs.com/viola-sh/p/6525990.html
Copyright © 2011-2022 走看看