gulp的使用

1. 电脑安装node 官网下载node安装，因为gulp的依赖是基于node环境下使用的。
2. 全局安装gulp

	//  npm修改为淘宝镜像（保证所有依赖下载速度和不丢包的情况）
	npm install -g cnpm --registry=https://registry.npm.taobao.org
	// 安装gulp
	cnpm install --save-dev gulp  

3.作为项目的开发依赖（devDependencies）安装：比如在文件gulp下执行下面这条命令

	npm install --save-dev gulp

4.项目根目录新建gulpfiles.js 文件 （根目录就是gulp） a. dist 压缩文件 b. gulpfirst(项目文件，此文件随个人习惯) c. gulpfile.js 任务代码文件 d. package.json 依赖文件配置文件（项目依赖需要使用npm install --save 模块名）下载

// gulpfile.js文件的基本配置
// 依赖
var gulp = require('gulp'),
    // 清除
    clean = require("gulp-clean"),
    // 压缩html
    htmlmin = require('gulp-htmlmin'),
    // 压缩js
    uglify = require('gulp-uglify'),
    // 压缩css
    cssUglify = require('gulp-minify-css'),
    // 构建服务 gulp server
    connect = require('gulp-connect');
    
// gulp.task(name, fn) - 定义任务，第一个参数是任务名，第二个参数是任务内容。
// gulp.src(path) - 选择文件，传入参数是文件路径。
// gulp.dest(path) - 输出文件
// gulp.pipe() - 管道，你可以暂时将 pipe 理解为将操作加入执行队列

// 压缩 js 文件
gulp.task('js', function() {
    // 1. 找到文件
    return gulp.src('./gulpfirst/js/*.js')
    // 2. 压缩文件
        .pipe(uglify())
        // 3. 另存压缩后的文件
        .pipe(gulp.dest('./dist/js'))
});
// 压缩css文件
gulp.task('css',function(){
    return gulp.src('./gulpfirst/css/*.css')
        .pipe(cssUglify())
        .pipe(gulp.dest('./dist/css'))
});
// 压缩html文件
gulp.task('html', function () {
    return gulp.src("./gulpfirst/*.html")
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest("./dist/"));
});
// 执行清空任务
gulp.task("clean", function(){
    console.log('开始清空dist文件夹 --不清空img ');
    return gulp.src(['./dist/*.html','./dist/css/*','./dist/js/*.js'])
        .pipe(clean());
});
// 默认任务执行
gulp.task('default',gulp.series('clean','html','css','js'));


//建立一个配置对象变量，后面我们要传递给插件用来启动server
var serverConfig={
    root:'gulpfirst',//从哪个目录开启server
    port:8080,//将服务开启在哪个端口
}
//建立一个server任务 直接可以用 gulp server就可以执行这个任务
gulp.task('server', function() {
    connect.server(serverConfig);
});

5. 使用gulp项目编译和启动项目

// 文件编译
 gulp
// z在根目录或者dist文件下
gulp server