认识GULP

1、什么是gulp

gulp是一个项目开发的 自动化打包构建工具。

那么,什么是自动化打包构建工具?

帮助我们把文件中多余的空格/换行删掉，尽可能的减小文件的体积。

• 常见的自动化打包构建工具

• gulp
• webpack

2、安装gulp

• 先安装一个 全局 gulp 依赖

npm install -g gulp@3.9.1

• 在项目里面安装一个项目开发依赖

npm i --save-dev gulp@3.9.1

• 检验是否安装成功

gulp -v    //显示版本号即为成功

3、项目 gulp配置

• 新建项目，目录如下

- gulp_demo
  + node_modules         依赖包目录
  + src                  项目源码
  + gulpfile.js          gulp 配置文件
  + package-lock.json    依赖下载版本 json 文件
  + package.json         项目管理 json 文件
  

 npm init --yes   
 npm init -y  //自动生成package.json文件
 cnpm i jquery --save //也会自动生成package.json文件

4、打包CSS,JS文件

//引入第三方库
let gulp = require('gulp');
let cssmin = require('gulp-cssmin');
let uglify = require('gulp-uglify');

//创建一个打包 css的任务
gulp.task('css',function(){
    //css为任务名
    gulp.src('./src/css/**')  //**代表所有的css文件
    .pipe(cssmin())    //压缩css文件  需要在引入一个包
    .pipe(gulp.dest('./dist/css'))  //压缩到'./dist/css'目录下
})

//创建js任务
gulp.task('js',function(){
    //js任务名
    gulp.src('./src/js/**')
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))
})


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

在该项目目录下打开CMD,输入

gulp  任务名
或者 
gulp

5、自动添加前缀

// 引入 gulp-autoprefixer 
const autoPrefixer = require('gulp-autoprefixer')

.pipe(autoPrefixer({
        	browsers: ['last 2 versions']
 }))

6、编译 ES6 语法

//引入 gulp-babel
//es6 转 es5 虽然需要下载三个依赖，但是只需要引入一个 gulp-babel 就可以了
const babel = require('gulp-babel')
.pipe(babel({
       presets: ['es2015']
}))

更多关于gulp的学习请参考gulp中文文档