Gulp压缩

一、Gulp压缩

    npm install gulp -g // 全局安装gulp
    npm install gulp -s // 安装gulp到项目中
    npm install gulp-sass -s
    npm install gulp-clean-css -s

    1、gulp-sass：sass转css
    2、gulp-clean-css：压缩css
    3、gulp-rename：重命名
    4、gulp-uglify：压缩js 
    5、gulp-concat：合并JS文件
    6、gulp-babel & babel-preset-es2015：ES6转ES5 
    7、gulp-imagemin：压缩图片
    8、browser-sync：热更新

开启gulp项目

   创建文件夹：gulp-demo
   进入gulp-demo文件夹
   在此目录下打开 CMD 窗口
   在CMD窗口中输入指令
   npm init：初始化项目
   在项目的根目录下创建文件
   gulpfile.js
   此文件就是将来执行 gulp 任务的主文件
    

在项目的根目录下输入指令
1、npm install gulp -g 全局安装gulp.exe

npm install gulp -g

2、npm install gulp -s 在当前项目中安装gulp模块

npm install gulp -s

开启 gulp 任务

在 gulpfile.js 中输入以下代码

// task()：开启gulp任务
// 参数1：任务名称
// 参数2：回调函数，函数中写入业务代码
gulp.task("default",function(done){
    // gulp任务的代码写在这里
    console.log( "Hello Gulp" );
    // done函数异步通知完成
    done()
})

安装 gulp-sass

 npm i gulp-sass -s

    // 引入模块
        const sass = require("gulp-sass")
    // 任务代码
        // 任务名 sass_to_css
        gulp.task("sass_to_css",done=>{
            gulp.src("./src/sass/01.scss")  // 导入文件源
            .pipe( sass() )     // 将.scss => .css 
            .pipe( gulp.dest("./dist/css") )           // 将.css文件输出到指定的目录中
            done()
        })

安装 gulp-clean-css

 npm i gulp-clean-css -s

    // 引入模块
        const cleanCss = require("gulp-clean-css")
    // 任务代码
        gulp.task("cleanCss",done=>{
            gulp.src("./src/sass/01.scss")  // 导入文件源
            .pipe( sass() )     // 将.scss => .css 
            .pipe( cleanCss() ) // 将css文件压缩
            .pipe( gulp.dest("./dist/css") )           // 将.css文件输出到指定的目录中
            done()
        })

安装 gulp-rename

npm i gulp-rename -s

   // 引入模块
        const rename = require("gulp-rename")
   // 任务代码
        gulp.task("rename",done=>{
            gulp.src(["./src/sass/01.scss","./src/sass/03.scss"])
            .pipe(sass())
            .pipe(cleanCss())
            .pipe( rename({
                // dirname: "main/text/ciao",  // 目录名
                // basename: "aloha",
                // prefix: "bonjour-",     // 前缀
                suffix: ".min",        // 后缀
                extname: ".css"          // 扩展名
            }) )   // .css => .min.css    01.电视剧天堂-人民的名义-第一季第一集.mp4   bootstrap.min.css
            .pipe(gulp.dest("./dist/css"))
            done()
        })

安装 gulp-uglify

 npm i gulp-uglify -s

   // 引入模块
        const uglify = require("gulp-uglify")
   // 任务代码
        gulp.task("uglify",done=>{
            gulp.src("./src/js/01.js")
            .pipe( uglify() )
            .pipe( rename("01.min.js") )   
            .pipe(gulp.dest("./dist/js"))
            done()
        })

安装 gulp-concat

npm i gulp-concat -s

  //  引入模块
        const concat = require("gulp-concat")
  //  任务代码
        gulp.task("concat",done=>{
            gulp.src("./src/js/*.js")
            .pipe( concat("all.js") )
            .pipe(gulp.dest("./dist/js"))
            done()
        })

安装 gulp-babel

npm i gulp-babel@7 -s
npm i babel-preset-es2015 -s
npm i babel-core -s

准备
在项目的根目录库下创建一个文件
  .babelrc
在此文件中写入

   {
        "presets":["es2015"]
    }

// 引入
    const babel = require("gulp-babel")
// 任务代码
    gulp.task("es6toes5",done=>{
        gulp.src("./src/js/es6.js")
        .pipe(babel())  // es6 => es5
        .pipe( rename("es5.js") )
        .pipe( gulp.dest("./dist/js") )
        done()
    })

安装 gulp-imagemin

npm i gulp-imagemin -s

  // 引入
        const imagemin = require("gulp-imagemin")
  // 任务代码
        gulp.task("img",done=>{
            gulp.src("./src/img/*.png")
            .pipe(imagemin())  //
            .pipe( gulp.dest("./dist/img") )
            done()
        })

安装 browser-sync

 npm i browser-sync -s

	//  引入
	var gulp = require('gulp'),
	    browserSync = require('browser-sync');
	// 设置任务---使用代理
	gulp.task('browser-sync', function () {
	    browserSync.init({
	        files:['**'],
	         proxy:'localhost', // 设置本地服务器的地址
	         port:8080  // 设置访问的端口号
	    });
	});