gulp壓縮js

⑴ gulp構建工具的幾個使用技巧

這里並不講什麼 gulp 及其其插件的安裝，此前的文章已經提到過了。這里主要用來記錄一下，gulp構建工具的一些簡單常用的用法。
最有用的Gulp插件匯總
1）假如我們想使用gulp壓縮js文件並合並js文件，應如何操作呢？
使用gulp-uglify和gulp-concat插件，gulpfile.js 大致如下：
/**
* Created by DreamBoy on 2016/8/19.
*/
var gulp = require('gulp');
var gutil = require('gulp-util');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');

gulp.task('concat', function() {
// 你的默認的任務代碼放在這
gulp.src('./src/*.js')
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(gulp.dest('./build'));
});

gulp.task('default', ['concat']);

// 在命令行中運行 gulp
/*
默認的名為default的任務（task）將會被運行，在這里，這個任務並未做任何事情。
想要單獨執行特定的任務（task），請輸入gulp <task> <othertask>。
*/
更加詳細的用法可以參考：gulp教程之gulp-uglify

⑵ Nodejs之gulp用法總結

一、nodeJS基礎操作

    (一)、安裝nodeJS (node -v)

    (二)、npm 包管理工具  (cnpm安裝 ：  npm install gulp -g)

    (三)、在項目中初始化package.json  (nodejs的配置文件,在項目中安裝的模塊,會記錄在package.json)  npm init

    (四)、在其他位置需要配置相關模塊時，只需把pageage.json拷貝過來，執行 npm install,即可自動安裝所需模塊

二、gulp

    1. 安裝 (gulp -v)

        (1)全局安裝  npm i gulp -g

        (2)本地安裝：  npm i gulp --save-dev

    2. 在項目根目錄創建 gulpfile.js

    3. gulp.task()    gulp.src()  gulp.pipe()  gulp.dest()  gulp.watch()

    4. gulp插件：  (1)壓縮css  (2)壓縮js  (3) 合並js  (4) 壓縮圖片 (5)自動添加前綴 autoprefixer  (6)sass編譯  （7）熱刷新

⑶ 前端構建工具Gulp.js 你知多少..(webpack/gulp/grunt)

@ TOC

閱讀本文章之前，相信你已經對前端構建工具(webpack、gulp、grunt)有一定的認知和了解了，那麼他們之間究竟有什麼區別呢？

gulp文檔上面有這么一句話 ，也就是說 gulp是一個自動化構建工具；
gulp的一些功能如下(包括但不限於):

其實Webpack和另外兩個並沒有太多的可比性

傻瓜式起步照搬官網文檔
1.安裝

2.在項目根目錄下創建一個名為 gulpfile.js 的文件：

3.運行 gulp：

默認的名為 default 的任務（task）將會被運行，在這里，這個任務並未做任何事情。
具體詳情可以查看 gulpjs.com文檔

新建一個項目gulp-test
環境:

1.新建文件以下文件如下

其中 gulpfile.js 是我們gulp的配置文件，啟動gulp默認會找個這個文件並執行；
2.接下來安裝依賴

一直按回車Enter初始化package.json文件(小技巧: npm iniy -y 可以免去繁瑣的enter步驟)
此時我們的目錄結構是這樣了

安裝依賴

這里頁面實時刷新只講這個 gulp-connect ，其他詳情可以參照 Browsersync 和文章 gulp-livereload

安裝完依賴後配置gulpfile.js如下:

大概講解一下gulpfile.js:

gulp.task 是gulp的api 定義一個使用 Orchestrator 實現的任務（task）
如上我們定義了 my-task-js ， my-task-css ， html ， clean ， default ， watch ， server 等任務，其中:

my-task-js 是將 符合所提供的匹配模式的js 進行檢測(gulp-jshint)、壓縮(gulp-uglify)、合並(gulp-concat)、重命名(gulp-rename)、輸出(gulp.dest)到/dist/js目錄下；

my-task-css 是將 符合所提供的匹配模式的sass進行編譯(gulp-sass)、壓縮(gulp-uglify)、合並(gulp-concat)、重命名(gulp-rename)、輸出(gulp.dest)到/dist/css目錄下；

html 是將 符合所提供的匹配模式的html進行監聽，如果有變化則connect.reload()

clean 是如果任務重新啟動時 刪除舊文件；

default gulp默認啟動的任務

watch gulp的api 監視文件，並且可以在文件發生改動時候做一些事情。它總會返回一個 EventEmitter 來發射（emit） change 事件。

server 依賴gulp-connect啟動一個伺服器

配置完gulpfile.js之後，我們給js和css及html加點東西:

首先js/helloworld.js

css/index.scss

index.html

運行gulp

瀏覽器效果:

接下來我們修改helloworld.js來看看是否能實時刷新
修改如下:

按保存之後，終端給我們報了一個錯:

查看js發現我們用了es6語法的聲明語句 但當前gulp無法處理es6語法，有問題解決問題，es6=>es5

解決方案:
安裝gulp-babel babel-core babel-preset-es2015

gulpfile.js修改如下:

運行

依然報上面的錯；找了一些原因發現，雖然安裝了相關依賴，卻沒有配置.babelrc文件，即babel還沒轉化es6

根目錄添加.babelrc文件

重新運行:

查看dist下的js文件

改變helloworld.js檢查頁面是否刷新

保存，頁面的天空藍換成你們喜歡的yellow顏色

修改index.scss 查看是否會刷新頁面

最後修改index.html 查看是否會刷新頁面

今天主要學習了gulp的簡單項目搭建及實時更新配置；其實gulp類似於grunt的弱化版，但更簡單好用，只是插件會少一些，目前主流的項目搭建工具主要是webpack，但依然有不少項目還用著gulp或者grunt

擴展:

下面還有一些樓主的學習筆記:

有興趣的可以多多交流@ 樓主博客

⑷ gulp怎麼壓縮html js css 混合的文件

合並和壓縮JS、CSS文件
壓縮JS，CSS文件需要引用如下組件：
gulp-minify-css: 壓縮css
gulp-jshint: 檢查js
gulp-uglify: 壓縮js
gulp-concat: 合並文件
gulp-rename: 重命名文件
gulp-clean: 清空文件夾
gulp-notify:提示
安裝組件項目目錄，通過cd 進入項目的根目錄，執行下邊的npm安裝組件
npm install gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-notify --save-dev

⑸ js文件 壓縮成一個 是怎麼弄的

gulp + webpack/browserify
用gulp加上webpack或者browserify來完成。js之間使用require相互引用，然後在gulpfile裡面設置把所有文件整合輸出並uglify

⑹ gulp壓縮js的時候出現如下錯誤提示 events.js 141，求大神解答！

感覺上是你有代碼在產生錯誤輸出而且沒有被處理。能把具體錯誤的那個文件的代碼發一下嗎？

⑺ gulp壓縮js失敗，雖然執行成功了，但是沒有生成結果求大神解答

樓主,你這個問題解決了嗎?

⑻ gulp壓縮整站方法（html/css/js/image）

注入package.json(此json文件需要自己在當前項目目錄下創建即可--不能有注釋)安裝：

npm install gulp-uglify --save-dev

全局安裝：

npm install gulp-uglify -g

整站靜態文件壓縮配置文件gulpfile.js（html/css/image/js; 前提是安裝下列require用到的模塊）：

var gulp = require('gulp'),//基礎庫

    htmlmin = require('gulp-htmlmin'),//html壓縮

cssmin = require('gulp-minify-css'),//css壓縮

jshint = require('gulp-jshint'),//js檢查

uglify = require('gulp-uglify'),//js壓縮

imagemin = require('gulp-imagemin'),//圖片壓縮

    pngquant = require('imagemin-pngquant'),//圖片深入壓縮

imageminOptipng = require('imagemin-optipng'),

    imageminSvgo = require('imagemin-svgo'),

    imageminGifsicle = require('imagemin-gifsicle'),

    imageminJpegtran = require('imagemin-jpegtran'),

domSrc = require('gulp-dom-src'),

cheerio = require('gulp-cheerio'),

processhtml = require('gulp-processhtml'),

Replace = require('gulp-replace'),

cache = require('gulp-cache'),//圖片壓縮緩存

clean = require('gulp-clean'),//清空文件夾

conCat = require('gulp-concat'),//文件合並

plumber=require('gulp-plumber'),//檢測錯誤

gutil=require('gulp-util');//如果有自定義方法，會用到

var date = new Date().getTime();

gulp.task('clean',function(){

return gulp.src('min/**',{read:false})

.pipe(clean());

});

function errrHandler( e ){

    // 控制台發聲,錯誤時beep一下

    gutil.beep();

    gutil.log(e);

this.emit('end');

}

gulp.task('cleanCash', function (done) {//清除緩存

    return cache.clearAll(done);

});

gulp.task('htmlmin', function () {

    var options = {

        removeComments: true,//清除HTML注釋

        collapseWhitespace: true,//壓縮HTML

        collapseBooleanAttributes: false,//省略布爾屬性的值 <input checked="true"/> ==> <input />

        removeEmptyAttributes: false,//刪除所有空格作屬性值 <input id="" /> ==> <input />

        removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"

        removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"

        minifyJS: true,//壓縮頁面JS

        minifyCSS: true//壓縮頁面CSS

    };

    gulp.src(['index/*.htm','index/*.html'])

.pipe(plumber({errorHandler:errrHandler}))

.pipe(Replace(/_VERSION_/gi, date))

.pipe(processhtml())

        .pipe(htmlmin(options))

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

});

gulp.task('cssmin', function(){

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

.pipe(conCat('css/index.min.css'))

.pipe(plumber({errorHandler:errrHandler}))

        .pipe(cssmin({

            advanced: false,//類型：Boolean 默認：true [是否開啟高級優化（合並選擇器等）]

            compatibility: 'ie7',//保留ie7及以下兼容寫法 類型：String 默認：''or'*' [啟用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]

            keepBreaks: false,//類型：Boolean 默認：false [是否保留換行]

            keepSpecialComments: '*'

            //保留所有特殊前綴 當你用autoprefixer生成的瀏覽器前綴，如果不加這個參數，有可能將會刪除你的部分前綴

        }))

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

});

gulp.task('jsmin', function () {

    gulp.src(['index/js/*.js','!index/**/{text1,text2}.js'])

.pipe(conCat('js/index.min.js'))

.pipe(plumber({errorHandler:errrHandler}))

        .pipe(uglify({

            mangle: {except: ['require' ,'exports' ,'mole' ,'$']},//類型：Boolean 默認：true 是否修改變數名

            compress: true,//類型：Boolean 默認：true 是否完全壓縮

            preserveComments: 'false' //保留所有注釋

        }))

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

}); 

gulp.task('imagemin', function () {

    gulp.src('index/**/*.{png,jpg,gif,ico}')

.pipe(plumber({errorHandler:errrHandler}))

        .pipe(cache(imagemin({

            progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片         

svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox屬性

            use: [pngquant(),imageminJpegtran({progressive: true})

            , imageminGifsicle({interlaced: true}),imageminOptipng({optimizationLevel:3}), imageminSvgo()] //使用pngquant深度壓縮png圖片的imagemin插件         

        })))

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

});

gulp.task('default',['clean'],function(){

gulp.start('cssmin','htmlmin','jsmin','imagemin');

});

package.json(例子) package.json詳細介紹：https://docs.npmjs.com/files/package.json

（package.json  npm init 命令行創建文件方法http://blog.csdn.net/liyanhui1001/article/details/44020235 ）

{

  "name": "web",

  "version": "1.0.0",

  "description": "my text",

  "main": "gulpfile.js",

  "dependencies": {

    "gulp": "^3.9.1",

    "gulp-cache": "^0.4.5",

    "gulp-concat": "^2.6.0",

    "gulp-htmlmin": "^2.0.0",

    "gulp-imagemin": "^3.0.1",

    "gulp-jshint": "^2.0.1",

    "gulp-minify-css": "^1.2.4",

    "gulp-plumber": "^1.1.0",

    "gulp-uglify": "^1.5.4",

    "gulp-util": "^3.0.7",

    "imagemin-pngquant": "^5.0.0",

    "jshint": "^2.9.2",

    "gulp-clean": "^0.3.2"

  },

  "devDependencies": {

    "gulp-cheerio": "^0.6.2",

    "gulp-dom-src": "^0.2.0",

    "gulp-jslint": "^1.0.1",

    "gulp-processhtml": "^1.1.0",

    "gulp-rename": "^1.2.2",

    "gulp-replace": "^0.5.4",

    "gulp-webpack": "^1.5.0",

    "imagemin-gifsicle": "^5.1.0",

    "imagemin-jpegtran": "^5.0.2",

    "imagemin-optipng": "^5.1.1",

    "imagemin-svgo": "^5.1.0",

    "webpack": "^1.13.1"

  },

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [

    "web"

  ],

  "author": "yl",

  "license": "ISC"

}

devDependencies里的內容即為你安裝gulp的模塊插件名稱和版本號！

最後，node.js里指定到當前項目目錄下輸入gulp命令即可：

gulp default

⑼ gulp壓縮js以後再怎麼操作

1.css壓縮 gulp-minify-css
2.js壓縮 gulp-uglify
3.js合並 gulp-concat
由於壓縮之前需要對js代碼進行代碼檢測，壓縮完成之後需要加上min的後綴，我們還需要安裝另外兩個插件：
4.重命名 gulp-rename
5.js代碼檢測 gulp-jshint (或gulp-jslint)