gulp-css压缩

gulp是什么？使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并

gulp是一个基于流的构建工具，可以自动执行指定的任务，简洁且高效

• 开发环境下，想要能够按模块组织代码，监听实时变化
• css/js预编译，postcss等方案，浏览器前缀自动补全等
• 条件输出不同的网页，比如app页面和mobile页面
• 线上环境下，我想要合并、压缩 html/css/javascritp/图片，减少网络请求，同时降低网络负担

var gulp = require('gulp');

//引入组件

var minifycss = require('gulp-minify-css'), //css压缩
    uglify = require('gulp-uglify'), //js压缩
    concat = require('gulp-concat'), //合并文件
    rename = require('gulp-rename'), //重命名
    clean = require('gulp-clean'), //清空文件夹
    minhtml = require('gulp-htmlmin'), //html压缩
    jshint = require('gulp-jshint'), //js代码规范性检查
    imagemin = require('gulp-imagemin'); //图片压缩

gulp.task('html', function(){
  return gulp.src('src/*.html')
    .pipe(minhtml({collapseWhitespace: true}))
    .pipe(gulp.dest('dist'))
 });

gulp.task('css', function(argument){
  gulp.src('src/*.css')
    .pipe(concat('merge.min.css'))
    .pipe(rename({
        suffix: '.min'
    }))
    .pipe(minfycss())
    .pipe(gulp.dest('dist/css/'))
})

gulp.task('js', function(argument){
  gulp.src('src/js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'))

    .pipe(concat('merge.js'))
    .pipe(rename({
        suffix: '.min'
    }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js/'))
 })

gulp.task('img', function(argument){
  gulp.src('src/imgs/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/imgs'))
 })

gulp.task('clear', function(){
  gulp.src('dist/*', {read: false})
    .pipe(clean())
 })

gulp.task('build', ['html', 'css', 'js', 'img '])

//执行
/*
gulp html //html压缩
gulp css //css压缩合并
gulp js //js书写规范，压缩
gulp img //img压缩
gulp clear //清空文件夹
gulp build //执行以上
*/

简单的了解了gulp，我们可以试着做个小小的测试，看下gulp是怎么压缩css的

首先我们得做好准备工作
在gitbash输入以下几个命令行：

• 全局安装：npm install gulp-cli -g
• 当前文件夹下安装： npm install gulp -D 等同于npm install gulp --save-dev
• 在当前文件夹下初始化：npm init (因为我们需要一个package.json文件)
• 安装好这个cssnano： npm install --save-dev gulp-cssnano（用于压缩文件）
• 安装好这个concat：npm install --save-dev gulp-concat（用于合并文件）

我们开始第一步具体的操作了：

写好文件结构，src用来放css文件和js文件，dist是输出目录，新建gulpfile.js，index.html，nodejs自动生成的package.json

image.png

在gulpfile.js里写下如下代码

var gulp = require('gulp')

var cssnano = require('gulp-cssnano')
var concat = require('gulp-concat')

gulp.task('css', function () { // gulp.task创建一个css任务

  gulp.src('./src/css/*.css') // 通过src定位到需要去处理的所有css文件，括号里是地址
    .pipe(concat('index-merge.css')) // 把所有的css文件合并成一个文件，文件名是index-merge.css
    .pipe(cssnano()) // index-merge.css文件传递到这里，进行压缩
    .pipe(gulp.dest('dist/css')) //压缩之后把文件输出到dist目录下的css目录
})

gulp.task('default', ['css'])

写好之后编写我们的css代码，例如我的html文件里写下h1,h2,h3标签，每个标签单独用一个css文件来写它的颜色样式

image.png

准备工作做好之后，我们就可以在命令行里输入gulp css或者gulp（如果想直接输如gulp就能压缩，需要加上最后一句gulp.task('default', ['css'])

输入之后我们就能看到dist/css目录下多了个index-merge.css文件，这样我们就压缩好了css文件，在html里引用这个生成好的css文件就可以达到想要效果了

image.png

注意：css合并是按照顺序来合并的！因为css有权重的，注意顺序的话就不会导致权重不同的被覆盖
还有，假如使用npm安装插件太慢了，可以执行
npm install -g cnpm --registry=https://registry.taobao.org
先安装cnpm，之后在安装插件时用cnpm安装cnpm install gulp。

如果你之后需要发布node工具时遇到这个报错

image.png

说明你是进入了私有模式，
需要输入
npm config set registry http://registry.npmjs.org

设置回原本的就可以了