gulp图片压缩

Ⅰ gulp和webpack能一起用吗

可以的，用gulp来处理CSS和JS的编译、压缩等，然后供webpack引入使用，webpack的配置文件也可以写gulp的task()里面，怎么用就看具体开发需求了。

Ⅱ 有了gulp和webpack，还需要bower吗

不是同一个level的工具。gulp是工具链，可以配合各种插件做js压缩，css压缩，less编译等工作webpack是文件打包工具，可以把项目的各种js文、css文件等打包合并成一个或多个文件bower是包管理器，用来管理项目里的那些外部依赖的。所以是否还用bower，完全取决于自己的需求。不要执着于是否用了gulp或者webpack

Ⅲ gulp+webpack怎么实现前端模块化

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

gulp是基于Nodejs的自动任务运行器， 她能自动化地完成
javascript/coffee/sass/less/html/image/css
等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。

gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。

webpack

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

**当然个人还是喜欢webpack的模块化优秀

废话不多说现在开始gulp之旅

初始化项目(此处已经认为node环境已经安装)

建立文件夹 名字自己随便取 比如 gulpText，然后输入以下命令
$ cd gulpText
$ mkdir images //建立存放图片文件夹
$ mkdir src // 存放 js 以及css
$ mkdir index.html //主页
$ mkdir gulpfile.js //编写gulp 任务文件
$ mkdir mock //mock数据

然后输入以下命令 然后一路点下去生成json文件
$npm init

打开json文件看到这样的

1474889102536.png

全局安装gulp以便我们运行gulp进行打包等操作
$npm install gulp -g

如果感觉npm安装比较慢可以切换至cnpm下载，代码如下
$npm install cnpm -g

安装gulp包，方便我们引用gulp
$npm install gulp

成功截图

1474889517162.png

编写gulp任务

引入 gulp
//引入gulp
var gulp = require('gulp');

拷贝Index.html
//html
gulp.task('-index',function () {
gulp.src('./index.html')
.pipe(gulp.dest('./build'));
})

执行命令
$ gulp -index

1474890843877.png]( http://upload-images.jianshu.io/upload_images/2905209-c00d640651bde279.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 )

1474890828271.png

拷贝images
// images
gulp.task('-images',function () {
gulp.src('./images**/*')
.pipe(gulp.dest('./build/'));
})

执行命令
$ gulp -iamges

1474891076408.png

1474891039689.png

css预处理

现在我们在src目录里创建文件styles放我们的scss代码，需要把scss代码编译到/build/prd/styles/下
$ cd src
$ mkdir styles
$ cd styles
$ touch app.scss
$ touch common.scss

app.scss项目代码
@charset "UTF-8";
@import "./common.scss";
body{
background-color: $base-color;
color: #000;
font-size: 20px;
font-weight: 800;
}
html{
width: 100%;
height: 100%;
}
html{
width: 100%;
height: 100%;
}
.lsds{
width: 100px;
height: 100px;
}

common.scss代码
$base-color:yellow;

安装css预编译包
$ npm install gulp-sass //sass编辑包
$ npm install gulp-minify-css'); //css压缩包
//引入css预处理模块
var sass= require('gulp-sass');
//引入css压缩模块
var minifyCSS = require('gulp-minify-css');
//css预处理

var cssFiles=[
'./src/styles/app.scss'
];
gulp.task('scss',function () {
gulp.src(cssFiles)
.pipe(sass().on('error',sass.logError))
.pipe(minifyCSS())
.pipe(gulp.dest('./build/prd/styles/'))
})

编辑scss
$ gulp scss

开启服务

安装server包
$ npm install gulp-webserver
//引入gulp-webserver 模块
var server = require('gulp-webserver');
gulp.task('server',function () {
gulp.src('./')
.pipe(server({
host:'127.0.0.1', //ip
port:80, //端口
directoryListing:{
enable:true,
path:'./'
},
livereload:true,
}));
})

Ⅳ gulp 如今可以使用的前端渲染引擎插件是啥

Gulp是基于Node.js的一个构建工具（自动任务运行器），开发者可以使用它构建自动化工作流程（前端集成开发环境）。一些常见、重复的任务，例如：网页自动刷新、CSS预处理、代码检测、压缩图片、等等…… 只需用简单的命令就能全部完成。使用它，可以简化工作，让你把重点放在功能开发上；同时减少人为失误，提高开发效率和项目质量，让专注更为专注。如果你之前接触过Grunt，那上手Gulp就会觉得非常容易理解。

Ⅳ webpack和gulp的区别

gulp
gulp强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。
webpack
webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。
两者区别
虽然都是前端自动化构建工具，但看他们的定位就知道不是对等的。
gulp严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。
webpack更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。

Ⅵ 前端自动化：谈谈grunt和gulp的区别

1、易用Gulp相比Grunt更简洁，而且遵循代码优于配置策略，维护Gulp更像是写代码。

2、高效 Gulp相比Grunt更有设计感，核心设计基于Unix流的概念，通过管道连接，不需要写中间文件。

3、高质量Gulp的每个插件只完成一个功能，这也是Unix的设计原则之一，各个功能通过流进行整合并完成复杂的任务。例如：Grunt的imagemin插件不仅压缩图片，同时还包括缓存功能。他表示，在Gulp中，缓存是另一个插件，可以被别的插件使用，这样就促进了插件的可重用性。目前官方列出的有673个插件。

4、易学Gulp的核心API只有5个，掌握了5个API就学会了Gulp，之后便可以通过管道流组合自己想要的任务。

5、流使用Grunt的I/O过程中会产生一些中间态的临时文件，一些任务生成临时文件，其它任务可能会基于临时文件再做处理并生成最终的构建后文件。而使用Gulp的优势就是利用流的方式进行文件的处理，通过管道将多个任务和操作连接起来，因此只有一次I/O的过程，流程更清晰，更纯粹。

6、代码优于配置维护Gulp更像是写代码，而且Gulp遵循CommonJS规范，因此跟写Node程序没有差别。

Ⅶ 谈谈grunt和gulp的区别

1、易用 Gulp相比Grunt更简洁，而且遵循代码优于配置策略，维护Gulp更像是写代码。2、高效 Gulp相比Grunt更有设计感，核心设计基于Unix流的概念，通过管道连接，不需要写中间文件。3、高质量 Gulp的每个插件只完成一个功能，这也是Unix的设计原则之一，各个功能通过流进行整合并完成复杂的任务。例如：Grunt的imagemin插件不仅压缩图片，同时还包括缓存功能。他表示，在Gulp中，缓存是另一个插件，可以被别的插件使用，这样就促进了插件的可重用性。目前官方列出的有673个插件。4、易学 Gulp的核心API只有5个，掌握了5个API就学会了Gulp，之后便可以通过管道流组合自己想要的任务。5、流 使用Grunt的I/O过程中会产生一些中间态的临时文件，一些任务生成临时文件，其它任务可能会基于临时文件再做处理并生成最终的构建后文件。而使用Gulp的优势就是利用流的方式进行文件的处理，通过管道将多个任务和操作连接起来，因此只有一次I/O的过程，流程更清晰，更纯粹。6、代码优于配置 维护Gulp更像是写代码，而且Gulp遵循CommonJS规范，因此跟写Node程序没有差别。

Ⅷ gulp.parallel 和gulp.series的区别

1、易用Gulp相比Grunt更简洁，而且遵循代码优于配置策略，维护Gulp更像是写代码。
2、高效 Gulp相比Grunt更有设计感，核心设计基于Unix流的概念，通过管道连接，不需要写中间文件。
3、高质量Gulp的每个插件只完成一个功能，这也是Unix的设计原则之一，各个功能通过流进行整合并完成复杂的任务。例如：Grunt的imagemin插件不仅压缩图片，同时还包括缓存功能。他表示，在Gulp中，缓存是另一个插件，可以被别的插件使用，这样就促进了插件的可重用性。目前官方列出的有673个插件。
4、易学Gulp的核心API只有5个，掌握了5个API就学会了Gulp，之后便可以通过管道流组合自己想要的任务。
5、流使用Grunt的I/O过程中会产生一些中间态的临时文件，一些任务生成临时文件，其它任务可能会基于临时文件再做处理并生成最终的构建后文件。而使用Gulp的优势就是利用流的方式进行文件的处理，通过管道将多个任务和操作连接起来，因此只有一次I/O的过程，流程更清晰，更纯粹。
6、代码优于配置维护Gulp更像是写代码，而且Gulp遵循CommonJS规范，因此跟写Node程序没有差别。

Ⅸ gulp contra 构建工具需要装什么软件

npm install gulp --save-dev 什么是gulp？ gulp是新一代的前端项目构建工具，你可以使用gulp及其插件对你的项目代码（less,sass）进行编译，还可以压缩你的js和css代码，甚至压缩你的图片，gulp仅有少量的API，所以非常容易学习。 gulp 使用 stream 方式处理内容。Node催生了一批自动化工具，像Bower，Yeoman，Grunt等。 gulp和grunt的异同点 易于使用：采用代码优于配置策略，Gulp让简单的事情继续简单，复杂的任务变得可管理。 高效：通过利用Node.js强大的流，不需要往磁盘写中间文件，可以更快地完成构建。 高质量：Gulp严格的插件指导方针，确保插件简单并且按你期望的方式工作。 易于学习：通过把API降到最少，你能在很短的时间内学会Gulp。构建工作就像你设想的一样：是一系列流管道。 因为gulp是用node.js写的，所以你需要在你的终端上安装好npm。npm是node.js的包管理器，所以先在你的机子上安装好node.js吧。 gulp安装命令 sudo npm install -g gulp 在根目录下新建package.json文件 npm init . 安装gulp包 安装好后再次输入gulp -v查看版本号，如下图显示则为成功： 安装插件 安装常用插件： sass的编译 （gulp-ruby-sass） 自动添加css前缀 （gulp-autoprefixer） 压缩css （gulp-minify-css） js代码校验 （gulp-jshint） 合并js文件 （gulp-concat） 压缩js代码 （gulp-uglify） 压缩图片 （gulp-imagemin） 自动刷新页面 （gulp-livereload） 图片缓存，只有图片替换了才压缩 （gulp-cache） 更改提醒 （gulp-notify） 清除文件 （del） 安装这些插件需要运行如下命令： 复制代码 代码如下: $ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev

Ⅹ gulp 压缩合并js有什么用

// 引入组件
var htmlmin = require('gulp-htmlmin'), //html压缩
imagemin = require('gulp-imagemin'),//图片压缩
pngcrush = require('imagemin-pngcrush'),
minifycss = require('gulp-minify-css'),//css压缩
jshint = require('gulp-jshint'),//js检测
uglify = require('gulp-uglify'),//js压缩
concat = require('gulp-concat'),//文件合并
rename = require('gulp-rename'),//文件更名
notify = require('gulp-notify');//提示信息