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