gulp - 项目构建工具

1.通过 npm 安装 gulp:

(1)npm 初始化:npm  init;

(2)安装在开发项目中:npm  install  gulp  --save-dev

(3)现在大部分人会直接用 npm 进行安装前后台管理的包;

         前台的包使用:--save 安装;后台的包使用 --save-dev 安装;

2.使用 gulp 的步骤:

(1)导入 gulp 时必须要新创建一个 gulpfile.js 文件;

(2)在 gulpfile.js 中编写代码;         

var gulp = require("gulp");

(3)需要导入其他插件时,要先使用 npm 进行下载(建议使用 --save-dev 安装);

var less = require("gulp-less")        //导入编译less的插件
var cssmin = require("gulp-cssmin");     //导入压缩css代码的插件

(4)定制任务(就是运行导入的插件);

gulp.task("less",function(){            //第一个参数是任务名
    gulp.src("./css/style.less")       //要编译的哪个less文件,路径一定要写全
    .pipe(less())                      //运用这个插件
    .pipe(cssmin())
    .pipe(gulp.dest(./css))            //要导出的css文件
})
//或者也可以这么去写
// gulp.task("default",["less","任务1","任务2"...])
//进行实时的监测文件的改动
gulp.task("update",function(){
    gulp.watch("./css/style.less",["less"])          //第一个参数是要监测的文件的路径,第二个是参数是任务
})

(5)每书写一个任务,都要在 cmd 命令中运行,比如使用 update 这个任务,就要输入 gulp update 回车运行;

(6)当将所有任务都放在一个数组中时,比如 default 这个任务,只需在 cmd 命令中输入 gulp 即可;

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值