gulp的使用
来源:互联网 发布:网络订货系统存在问题 编辑:程序博客网 时间:2024/06/05 18:03
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
- hello gulp,使用gulp的第一天。
- gulp的使用
- gulp的学习使用
- gulp的使用
- gulp的使用2
- gulp的使用
- gulp的使用
- Gulp的使用
- gulp的使用
- gulp的简单使用
- gulp的使用教程
- gulp的使用
- gulp工具的使用
- gulp 的 安装使用
- gulp工具的使用
- gulp的使用
- gulp的使用
- gulp的使用
- JS控制点击跳转到指定页面,以及返回到上一页
- react-native 之style
- 大数据舆情分析:全方位解读《战狼2》
- 从“快打游戏助手”公众号,看H5棋牌源码游戏的发展与趋势
- ==和equals的区别
- gulp的使用
- 【数据库学习】java使用Mongodb增删改查
- [总结]视音频编解码技术零基础学习方法
- No plugin found for prefix 'spring-boot' ...的问题解决方法
- Monkey and Banana
- 静态构造函数
- kotlin 图片浮雕处理
- 内存分配
- 如何定义一个只能在堆上(栈上)生成对象的类?