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
设置回原本的就可以了