gulp的使用

1.下载安装node.js及配置环境,这个随意。

2.初始化目录:启动控制台到项目文件夹执行npm init;这样会生成package.json文件

3.接着在控制台全局安装gulp包:npm install -g gulp;安装完成后再局部安装:npm install --save-dev gulp,这样gulp版本信息会保存到package.json文件中,这样项目可以在没有全局安装过gulp的电脑上也可以npm isntall后执行。

4.局部安装gulp的依赖包:gulp-minify-html、gulp-cssmin、gulp-uglify和gulp-imagemin,这三个包分别压缩html,css、js 和图片。gulp-concat包合并js文件;gulp-clean删除文件夹

var pkg = require("pkgName");
gulp.task("taskName", function(){
    gulp.src("filePath")
        .pipe(gulp.dest("开发输出路径")) // 复制文件
        .pipe(pkg())
        .pipe(gulp.dest("生产输出路径")) // 最终执行文件路径
})

5.一次性引入gulp前缀的包:gulp-load-plugins;安装好包之后在gulpfile.js文件中执行var $ = require("gulp-load-plugins")(); 然后就可以通过$[pkgName]直接调用(使用驼峰命名并去掉gulp前缀)。

6.使用自动化刷新页面:添加gulp-connect包和open包;

gulp.task("server",function(){
	$.connect.server({
		root: "dev/",
		port: 8000,
		livereload: true
	});
	open("http://localhost:8000");
	gulp.watch("src/*.html",["html"]);
	gulp.watch("src/css/*.css",["css"]);
	gulp.watch("src/js/*.js",["js"]);
	gulp.watch("src/images/**",["imgae"]);
});

然后在每个注册任务中的pipe(管道流)的最后面添加  .pipe($.connect.reload()),然后每次有监听的文件修改时就会自动刷新浏览器了,开始第一次没刷新浏览器是因为default任务只添加了server任务而没添加html或其他任务,开始监听文件没修改即不会更新。

7. 解决gulp经常奔溃的问题:使用gulp-plumber包(大家可以查考一下这篇文章),在容易出错的地方的pipe流最开始的地方加上pipe($.plumber())即可捕捉当前管道流中出现的错误。


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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值