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');//提示信息