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 相关文章推荐
Javascript之文件操作
Mar 07 Javascript
json跟xml的对比分析
Jun 10 Javascript
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
javascript 中模板方法单例的实现方法
Oct 17 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
js 根据对象数组中的属性进行排序实现代码
Sep 12 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 24 Javascript
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连接数据库代码应用分析
2011/05/29 PHP
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
javascript静态的url如何传递
2007/05/03 Javascript
javascript 获取图片颜色
2009/04/05 Javascript
jquery 批量上传图片实现代码
2010/01/28 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
webpack优化的深入理解
2018/12/10 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
python访问系统环境变量的方法
2015/04/29 Python
python实现图片变亮或者变暗的方法
2015/06/01 Python
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
python实现字符串和数字拼接
2020/03/02 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
娱乐地球:Entertainment Earth
2020/01/08 全球购物
司机工作自我鉴定
2014/09/19 职场文书
追悼会答谢词
2015/01/05 职场文书
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js