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,

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值