gulp安装以及打包合并的方法教程


Posted in Javascript onNovember 19, 2017

前言

gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。

安装、打包合并

1.安装node.js  下载地址: http://nodejs.cn/

打开node.js 命令行,输入: node  -v ,有版本号,则正确安装。

2.安装淘宝镜像 :命令行输入 :

npm install -g cnpm --registry=http://registry.npm.taobao.org

目的:使下在速度更快。

3.全局安装gulp

cnpm install --global gulp

4.创建目录,打开F盘,创建gulp文件夹。

命令行输入 :

f:

cd gulp

5.安装本地gulp

cnpm install --save-dev gulp

6.创建package.json文件

cnpm init

一路enter确定就行

7.web编辑器打开此gulp目录,如hbuilder、webstorm。

在gulp目录下创建gulpfile.js文件,gulp运行的入口

gulp安装以及打包合并的方法教程

8.确定何种打包压缩,html、js、css、img

9.js打包

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
 
gulp.task('default',function(){ 
 gulp.src('js/*.js') // 路径问题:gulpfile.js为路径的起点。此路径表示js文件下的所有js文件。
 .pipe(concat('all.js')) //合并成的js文件名称
 .pipe(uglify()) //压缩
 .pipe(gulp.dest('build')); //打包压缩在build目录下。
});

10.运行;node.js输入

gulp

会有报错,提示 gulp-concat组件没有安装。开始安装 :cnpm install gulp-concat --save-dev

再次运行 :gulp

再次报错,提示gulp-uglify组件没有安装。开始安装 :cnpm install gulp-uglify --save-dev

再次运行 :gulp

。。。。。。。。。。。。。。。

 成功之后会

gulp安装以及打包合并的方法教程

这里会看到 finished ‘default' ,‘default' 就是gulp.task任务开始的默认入口。如果创建多个task任务,且修改任务名称如:

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
 
gulp.task('default',function(){ 
 gulp.src('js/*.js') // 路径问题:gulpfile.js为路径的起点。此路径表示js文件下的所有js文件。
 .pipe(concat('all.js')) //合并成的js文件名称
 .pipe(uglify()) //压缩
 .pipe(gulp.dest('build')); //打包压缩在build目录下。
})
 
//css 打包压缩
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
 
gulp.task('style', function() { //task 任务名称为style
 

gulp.src('.css/*.css')
 

.pipe(concat('styles.css'))
 

.pipe(autoprefix('last 2 versions'))
 

.pipe(minifyCSS())
 

.pipe(gulp.dest('styles'));
 

});

重新运行 : gulp

结果:

gulp安装以及打包合并的方法教程

会发现只运行了 default的task任务。因为这是唯一默认的gulp执行入口。

修改如下

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
 
gulp.task('js',function(){ 
 gulp.src('js/*.js') // 路径问题:gulpfile.js为路径的起点。此路径表示js文件下的所有js文件。
 .pipe(concat('all.js')) //合并成的js文件名称
 .pipe(uglify()) //压缩
 .pipe(gulp.dest('build')); //打包压缩在build目录下。
})
 
//css 打包压缩
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
 
gulp.task('style', function() { //task 任务名称为style
 

gulp.src('.css/*.css')
 

.pipe(concat('styles.css'))
 

.pipe(autoprefix('last 2 versions'))
 

.pipe(minifyCSS())
 

.pipe(gulp.dest('styles'));
 

});

<br>gulp.task('default',function(){
 gulp.run(['js','style']); //这里开始执行多个task任务
});

如果遇到什么组件没有安装的话,想你应该知道怎么操作了。

11.图片压缩

var imagemin = require('gulp-imagemin');
gulp.task('img', function() {
 return gulp.src('imgs/*.png')
 .pipe(imagemin())
 .pipe(gulp.dest('miniImg'));
});

12.html压缩

var htmlmin = require('gulp-htmlmin');
gulp.task('html', function() {
 return gulp.src('../*.html')
 .pipe(htmlmin({collapseWhitespace: true}))
 .pipe(gulp.dest('../'));
});

13.路径问题自己修改

gulp打包js/css时合并成一个文件时的顺序解决

1、可以使用插进gulp-order。

2、可以这样的写法:

return gulp.src(['js/common.js','js/**/*.js'])
.pipe(concat('build.js'))//合成到一个js
.pipe(gulp.dest(buildBasePath+'js'))//输出到js目录
.pipe(uglify())//压缩js到一行
.pipe(concat('build.min.js'))//压缩后的js
.pipe(gulp.dest(buildBasePath+'js'));//输出到js目录

总结

以上就是这篇文章的全部内容了,只能说入个门,还有更多的功能。多看高人博客吧或官网,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
extjs之去除s.gif的影响
Dec 25 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
精通Javascript系列之数值计算
Jun 07 Javascript
解决jquery异步按一定的时间间隔刷新问题
Dec 10 Javascript
精通JavaScript的this关键字
May 28 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
jQuery实现大图轮播
Feb 13 Javascript
node.js 抓取代理ip实例代码
Apr 30 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
es6函数之箭头函数用法实例详解
Apr 25 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
js实现rem自动匹配计算font-size的示例
Nov 18 #Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 #Javascript
Angular中支持SCSS的方法
Nov 18 #Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 #Javascript
jQuery实现checkbox的简单操作
Nov 18 #jQuery
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 #Javascript
基于jquery实现五星好评
Nov 18 #jQuery
You might like
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
PHP session 会话处理函数
2016/06/06 PHP
Symfony查询方法实例小结
2017/06/28 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
2016/07/28 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
JS实现随机点名器
2020/04/12 Javascript
numpy自动生成数组详解
2017/12/15 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
纪律教育月活动总结
2014/08/26 职场文书
万能检讨书2000字
2014/10/17 职场文书
民主评议党员个人总结
2015/02/13 职场文书
公司开会通知
2015/04/20 职场文书
员工福利申请报告
2015/05/15 职场文书
2015年教研员工作总结
2015/05/26 职场文书
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL