gulp详细配置

1.gulp的由来

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
gulp是基于Nodejs的自动任务运行器，她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。
gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作

2.安装nodejs

2.1、说明：gulp是基于nodejs，理所当然需要安装nodejs；
2.2、安装：打开nodejs官网（https://nodejs.org/en/），它会根据系统信息选择对应版本（.msi文件）。
注：安装完成之后注意将其配置到环境变量（系统变量path中），这样你就可以在全局范围内去使用它了

2.3测试：按window + r 输入cmd回车，然后输入node -v
然后输入npm -v
如果都能打印出相应版本信息，那么说明你配置成功了

3.安装cnpm

因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事（非常感谢）。
网址：http://npm.taobao.org
安装：命令提示符执行
npm install cnpm -g --registry=https://registry.npm.taobao.org
上面这句话直接复制即可

注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；
将路径C:\Users\asus\AppData\Roaming\npm\node_modules\cnpm配置到环境变量中，这样就可以在全局范围内使用cnpm命令了

4.新建package.json文件

进入自己需要的一个文件夹中
cd F:\workspace\gulp

创建package.json文件
cnpm init
在路径 下会形成这样的一个.json文件（部分内容为后添加的）

{
  "name": "gulp",//项目名称（必须）
  "version": "1.0.0",//项目版本（必须）
  "description": "",//项目描述（必须）
  "main": "gulpfile.js",//入口文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",//作者
  "license": "ISC",//项目许可协议
  "dependencies": {//项目依赖的插件
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.7.0",
    "gulp-imagemin": "^6.1.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^1.4.0",
    "gulp-uglify": "^3.0.2"
  }
}

5.本地安装gulp插件

安装：定位目录命令后提示符执行cnpm i gulp@3 -g（这里以gulp3的版本为例）

@3 代表选择了 3 的版本

i 即为 install

-g 即为 --global

查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装

6.当前目录内部安装 gulp 模块

cnpm i gulp@3 -D

cnpm i gulp@3 -S （二者选择其一即可）

-D 缩写 --save-dev 开发依赖

-S 缩写 --save 项目依赖

开发依赖： 开发过程中需要使用到的依赖的模块，项目上线时不需要的模块 — 代码格式校验的模块

项目依赖： 项目上线仍然需要使用的模块

7.创建文件 gulpfile.js ,配置gulp

这里需要安装一些模块，提前先写出来

合并css文件的模块 cnpm i gulp-concat -S

压缩css cnpm i gulp-minify-css -S

既要 未压缩的也要有压缩的 cnpm i gulp-rename -S

压缩js cnpm i gulp-uglify -S

压缩图片 cnpm i gulp-imagemin -S

gulp 服务器 cnpm i gulp-connect -S

const gulp = require('gulp');
const concat = require('gulp-concat');
const minify = require('gulp-minify-css');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');
const imagemin = require('gulp-imagemin');
const connect = require('gulp-connect');

//创建 index.html，使用gulp完成对于index.html的复制操作，复制到当前目录的dist目录内
gulp.task('copy-index', () => {
    gulp.src('index.html')
        .pipe(gulp.dest('dist'))
        .pipe(connect.reload());
});

//合并代码放到dist/css
// 压缩css 重命名 再放到dist/css
gulp.task('copy-css', () => {
    gulp.src('css/**/*')
        .pipe(concat('main.css'))
        .pipe(gulp.dest('dist/css'))
        .pipe(minify())
        .pipe(rename('main.min.css'))
        .pipe(gulp.dest('dist/css'))
        .pipe(connect.reload());
});

//合并代码放到dist/js
// 压缩js 重命名 再放到dist/js
gulp.task('copy-js', () => {
    gulp.src('js/**/*')
        .pipe(concat('main.js'))
        .pipe(gulp.dest('dist/js'))
        .pipe(uglify())
        .pipe(rename('main.min.js'))
        .pipe(gulp.dest('dist/js'))
        .pipe(connect.reload());
});

//复制图片并压缩至 dist/images
gulp.task('copy-images', () => {
    gulp.src('images/**/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'))
        .pipe(connect.reload());
});

//处理数据
gulp.task('copy-data', () => {
    gulp.src('data/**/*')
        .pipe(gulp.dest('dist/data'))
        .pipe(connect.reload());
});

//一次性执行多个任务

//任务的名称不要自己随意定义，就写build
gulp.task('build', ['copy-index', 'copy-css', 'copy-js', 'copy-images', 'copy-data'], () => {
    console.log('success');
});


//gulp 服务器
//server 任务名不能更改
gulp.task('server', () => {
   connect.server({
       root : 'dist',
       livereload : true
   })
});


//检测html文件、css文件、js文件、图片、数据的改变，执行不同的任务
gulp.task('watch', () => {
    gulp.watch('index.html', ['copy-index']);
    gulp.watch('css/**/*', ['copy-css']);
    gulp.watch('js/**/*', ['copy-js']);
    gulp.watch('images/**/*', ['copy-images']);
    gulp.watch('data/**/*', ['copy-data']);
});

//同时默认执行 server 任务 和 watch 任务
gulp.task('default', ['server', 'watch']);

//热更新  --- 主动更新页面
// 
//  在页面、css、js、图片、数据相关任务最后执行一句话，重新启动服务器
//  .pipe(connect.reload());

成功后如下图所示:

最后可以实现修改本地代码，能同步实时修改服务器上的代码！！！