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

巴特西

使用gulp管理sass文件

最新文章

热门文章