使用 gulp 编译压缩 css


由于部分 css 会包含很多的样式 , 或者示例 , 有时我们只需要其中的一种样式 , 如果把这个文件全部引入 , 为了提高加载速度 , 我们只引入我们需要的部分 。 如 : https://connoratherton.com/loaders 中的倒数第三个加载特效  

查看软件是否安装

node -v

npm -v

安装gulp

sudo npm install -g gulp

创建项目

克隆项目到本地: https://github.com/ConnorAtherton/loaders.css.git

gulp 用法

gulp只有五个方法: task,run,watch,src,和dest

观察 Gulpfile.coffee 文件

# 引入组件
gulp = require 'gulp'
sass = require 'gulp-sass'
jade = require 'gulp-jade'
cssmin = require 'gulp-cssmin'
rename = require 'gulp-rename'
autoprefixer = require 'gulp-autoprefixer'
gutil = require 'gulp-util'
plumber = require 'gulp-plumber'

# scss:compile任务 通过 /src/loaders.scss文件, 把编译后的文件输出到当前目录,然后gulp会重命名、压缩合并的文件,也输出到当前目录。
gulp.task 'scss:compile', ->
  gulp.src './src/loaders.scss'
    .pipe plumber((err) -> console.log(err.stack))
    .pipe sass()
    .pipe autoprefixer "last 2 versions", "> 1%", "ie 8", {
        map: false
      }
    .pipe plumber.stop()
    .pipe gulp.dest('./')
    .pipe cssmin()
    .pipe rename suffix: '.min'
    .pipe gulp.dest './'
    .on 'finish', -> gutil.log('scss build finished.')
# 执行默认任务
gulp.task 'default', ['scss:compile']

gulp 这将执行定义的default任务