gulp的安装使用过程

gulp的安装与配置执行

1.首先新建一个项目目录；

2.在项目目录下新建一个src的目录；

3.新建一个gulpfile.js；

配置gulp环境：

1.首先确认电脑是否装有gulp

gulp -v;

2.安装

cnpm install --global gulp-cli

3.安装gulp作为开发时的依赖项

npm install --save-dev gulp

4.检查

gulp -v;

若看到

若看到两个版本号，说明gulp安装成功了

CLI version：2.2.0

Local version：4.0.2

 

gulpfile.js下的gulp的配置：

//先引用gulp模块

const {src,dest} = require("gulp");

//1.定义一个默认任务

function defaultTask(cb){

console.log("这是我第一个gulp任务");

cb();

}

//将任务名暴露出去

//gulp 任务名（在命令窗口执行），启动gulp任务

exports.defaultTask = defaultTask;

//2.定义一个复制HTML文件的任务

function copyHtml(){

return src("./src/**/*.html")

.pipe(dest("./dist"))

}

exports.copyHtml = copyHtml;

安装gulp-sass，node-sass

（npm安装node-sass）

1.使用淘宝镜像进行安装（命令窗口）

npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/

 

2.安装node-sass和gulp-sass

npm install node-sass gulp-sass --save-dev

 

在gulpfile.js文件下配置运行：
 

// 定义scss转为css任务

const sass = require("gulp-sass");

sass.compiler = require("node-sass");

function scssTocss(){

            return src("./src/scss/**/*.scss")

                      .pipe(sass().on("error",sass.logError))

  .pipe(dest("./src/css/"))

}
exports.scssTocss = scssTocss;

安装gulp-uglify，gulp-babe，readable-stream

gulp-uglify压缩项目的js文件：

npm install --save-dev gulp-uglify

gulp-babel用于ES6转为ES5：
      Babel 7

      npm install --save-dev gulp-babel @babel/core @babel/preset-env

      Babel 6

      npm install --save-dev gulp-babel@7 babel-core babel-preset-env

一般安装最新的版本，如果安装有cnpm的话，直接使用cnpm安装，国内的没那么坑

readable-stream用于可读流，方便编写：

npm install --save readable-stream

实例：

var uglify = require("gulp-uglify");

// es6的代码转为es5的代码 ,gulp-babel的作用

var babel = require("gulp-babel");

var pipeline = require("readable-stream").pipeline;

// js代码的编译

function uglify_js(cb){

return pipeline(

        src('./src/**/*.js'),

  babel({

   presets:['@babel/env']

  }),
        uglify(),

        dest('dist')

  );

}

exports.uglify_js = uglify_js;

安装browser-sync引进服务器，实现热更新

browser-sync（安装地址：http://www.browsersync.cn/）找到gulp文件

npm install browser-sync gulp --save-dev

示例：

var browserSync = require('browser-sync').create();

function bs(cb){

cb();

browserSync.init({

 server:{

  baseDir:"./src"

 },

 files:["./src/**/*.html","./src/js/**/*.js","./src/css/**/*.css"],

 port:8888 //指定端口号

})
watch("./src/scss/**/*.scss",scss2css);

}

// 开发环境

exports.bs = exports.dev = bs;

将scss编译成css,并且压缩,输出到dist文件夹中

function scss2dist(){

return src("./src/scss/**/*.scss")

    .pipe(sass({outputStyle:'compressed'}).on("error",sass.logError))

    .pipe(autoprefixer({

     cascade:false

    }))

    .pipe(dest("dist/css"))

}

// 生产环境

// 同步打包 series 先执行1,再执行2

// exports.bulid = exports.pro = series(copyHtml,scss2dist,uglify_js);

// 异步打包 parallel 1,2同时进行

exports.build = exports.pro = parallel(copyHtml,scss2dist,uglify_js);

//当拿到别人的代码gulp处理过的项目代码，直接在项目的更目录下，打开cmd命令窗口，输入cnpm install，

就会把所有的依赖项安装出来