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运行的入口

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

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

成功之后会

  这里会看到 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

结果:

会发现只运行了 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'));   });
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.路径问题自己修改

14.只能说入个门,还有更多的功能。多看高人博客吧或官网。


gulp 打包合并的更多相关文章

  1. 使用gulp打包普通项目

    前言: 在使用gulp打包工具之前,我做的H5项目在浏览器中的缓存是很严重的,若改了一点css,加了一句js代码,不手动清除浏览器缓存是看不到效果的.老总也在项目演示当中遇到这些问题,一查找原因却是缓 ...

  2. 用gulp打包带参数资源做法与asp.net/java项目结合的自动构建方案探讨

    先探讨方案,后续再实现. gulp打包前端教程配置:http://www.cnblogs.com/EasonJim/p/6209951.html 可能存在以下场景: 1.整个服务端采用接口的形式暴露给 ...

  3. 打包合并多个dll

    复杂项目中会引用大量的第三方dll文件,为了便于管理会尝试把相关打包合并成一个dll文件. 推荐使用ILMerge,如需使用网上自行下载. 使用方法: cd 安装目录 ILmerge /target: ...

  4. 解决webpack和gulp打包js时ES6转译ES5时Object.assign()方法没转译成功的问题

    在webpack或gulp打包的配置文件中package.json 引入"@babel/plugin-transform-object-assign": "^7.2.0& ...

  5. gulp打包详解

    gulp的作用 删除文件中冗余的内容,压缩文件,减小文件体积 实际项目中运行的都是压缩完成以后的文件 减小加载响应时间 gulp打包压缩对象 html,css,js,sass,webserver 音频 ...

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

    1.可以使用插进gulp-order. 2.可以这样的写法: return gulp.src(['js/common.js','js/**/*.js']) .pipe(concat('build.js ...

  7. [转]gulp打包工具总结

    与grunt类似,gulp也是构建工具,但相比于grunt的频繁IO操作,gulp的流操作能更快更便捷地完成构建工作.gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级 ...

  8. 【原】webpack结合gulp打包

    在我前面的文章中,总结了一下自己学习webpack和gulp的一些东西.然而,在我的实际项目中,单独使用它们两者不能满足项目的需求.我遇到了下面的一些问题. 问题1: 因为我的图片需要放单cdn上面去 ...

  9. 使用GULP打包、压缩与打版本号

    这篇文章讲我整理的一种打包项目的方式,以下是我的依赖清单 "devDependencies": { "gulp": "^3.9.1", &q ...

随机推荐

  1. 实现径向变换用于样本增强《Training Neural Networks with Very Little Data-A Draft》

    背景: 做大规模机器学习算法,特别是神经网络最怕什么--没有数据!!没有数据意味着,机器学不会,人工不智能!通常使用样本增强来扩充数据一直都是解决这个问题的一个好方法. 最近的一篇论文<Trai ...

  2. 苹果 AR 新专利马上登陆 Facetime|Facebook 要用 VR 玩直播

    附上VR技术福利视频 链接: https://pan.baidu.com/s/1boGGVs7 密码: viy8 点击关注有更多VR技术资源哦 苹果 AR 新专利马上登陆 Facetime ,使用光场 ...

  3. JavaScript设计模式--桥梁模式--XHR连接队列

    针对该模式的例子现在不是很理解,写下来慢慢熟悉. 们要构建一个队列,队列里存放了很多ajax请求,使用队列(queue)主要是因为要确保先加入的请求先被处理.任何时候,我们可以暂停请求.删除请求.重试 ...

  4. 【JDK1.8】JDK1.8集合源码阅读——总章

    一.前言 今天开始阅读jdk1.8的集合部分,平时在写项目的时候,用到的最多的部分可能就是Java的集合框架,通过阅读集合框架源码,了解其内部的数据结构实现,能够深入理解各个集合的性能特性,并且能够帮 ...

  5. for循环的基础使用

    for循环:    for 变量名 in 列表:do           循环体    done    执行机制:           依次将列表中的元素赋值给“变量名”:每次赋值后即执行一次循环体: ...

  6. 1. Apache ZooKeeper快速课程入门

    Tips Tips做一个终身学习的人! 日拱一卒,功不唐捐. 在过去的几十年里,互联网改变了我们生活的方式.Internet上提供的服务通常由复杂的软件系统支持,这些系统跨越了大量的服务器,而且常常位 ...

  7. LeetCode 34. Search for a Range (找到一个范围)

    Given an array of integers sorted in ascending order, find the starting and ending position of a giv ...

  8. 关于docker使用的几个小问题(一)

    由于刚接触docker踩了几个坑,希望本文对网瘾少年有所帮助. Docker分CE版(社区版)和EE版(商用版),具体安装流程参考文档介绍,在此不再赘述.下面分Windows和Linux分别踩坑: 一 ...

  9. hdu 6215 -- Brute Force Sorting(双向链表+队列)

    题目链接 Problem Description Beerus needs to sort an array of N integers. Algorithms are not Beerus's st ...

  10. java8Stream原理深度解析

    Java8 Stream原理深度解析 Author:Dorae Date:2017年11月2日19:10:39 转载请注明出处 上一篇文章中简要介绍了Java8的函数式编程,而在Java8中另外一个比 ...