1. 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
2. 怎麼用gulp壓縮js和css文件
/步驟
首先要確保pc裝nodeglobal環境項目文件都install gulp
npm install gulp -g (global環境)
npm install gulp --save-dev (項目環境)
項目install需要gulp插件般壓縮需要
npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev
更插件鏈接找
項目根目錄新建gulpfile.jsrequire需要mole
var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
del = require('del');
壓縮css
gulp.task('minifycss', function() {
return gulp.src('src/*.css') //壓縮文件
.pipe(gulp.dest('minified/css')) //輸文件夾
.pipe(minifycss()); //執行壓縮
});
壓縮js
gulp.task('minifyjs', function() {
return gulp.src('src/*.js')
.pipe(concat('main.js')) //合並所jsmain.js
.pipe(gulp.dest('minified/js')) //輸main.js文件夾
.pipe(rename({suffix: '.min'})) //rename壓縮文件名
.pipe(uglify()) //壓縮
.pipe(gulp.dest('minified/js')); //輸
});
執行壓縮前先刪除文件夾內容
gulp.task('clean', function(cb) {
del(['minified/css', 'minified/js'], cb)
});
默認命令cmd輸入gulp執行命令
gulp.task('default', ['clean'], function() {
gulp.start('minifycss', 'minifyjs');
});
要cmd執行gulp即
3. 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');//提示信息
4. 有什麼gulp插件能夠將html中引用的css或js資源進行合並與壓縮
css文件壓縮用gulp-minify，js多個文件合並好像是gulp-concat然後再將其壓縮用gulp-uglify
5. gulp怎樣編譯合並不同文件夾下的多個sass文件
第一張圖中實現了將src目錄下的scss文件逐一編譯並壓縮到dist目錄下，但離我想要的效果還有一些差距，我希望能夠編譯壓縮的同時，將這三個css文件合並到一起去
6. gulp壓縮合並css/js時，怎麼自動修改引用壓縮後的css/js的路徑
記錄一下用 gulp 來合並、壓縮CSS以及進行 MD5命名以及替換文件中引入的CSS文件，當然這一系列操作都是用基於gulp插件的，主要會用到下面的幾個插件：
var concat = require('gulp-concat');//- 多個文件合並為一個；var minifyCss = require('gulp-minify-css');//- 壓縮CSS為一行； var rev = require('gulp-rev');//- 對文件名加MD5後綴var revCollector = require('gulp-rev-collector');//- 路徑替換
安裝Gulp插件到本地項目
npm init//- 生成一個 package.json，裡面是一些常規的配置信息npm install gulp gulp-concat gulp-minify-css gulp-rev gulp-rev-collector --save-dev//- 安裝插件到項目目錄內
完成上面兩步後，會在我們的項目內生成一個package.json文件以及一個node_moles目錄
創建配置文件 gulpfile.js
在項目根目錄內創建一個 gulpfile.js 文件(必須是這個文件名喲~)，內容就是上面幾個插件的配置信息：
var gulp = require('gulp');var concat = require('gulp-concat'); //- 多個文件合並為一個；var minifyCss = require('gulp-minify-css'); //- 壓縮CSS為一行；var rev = require('gulp-rev'); //- 對文件名加MD5後綴var revCollector = require('gulp-rev-collector'); //- 路徑替換gulp.task('concat', function() { //- 創建一個名為 concat 的 task
gulp.src(['./css/wap_v3.1.css', './css/wap_v3.1.3.css']) //- 需要處理的css文件，放到一個字元串數組里
.pipe(concat('wap.min.css')) //- 合並後的文件名
.pipe(minifyCss()) //- 壓縮處理成一行
.pipe(rev()) //- 文件名加MD5後綴
.pipe(gulp.dest('./css')) //- 輸出文件本地
.pipe(rev.manifest()) //- 生成一個rev-manifest.json
.pipe(gulp.dest('./rev')); //- 將 rev-manifest.json 保存到 rev 目錄內});
gulp.task('rev', function() {
gulp.src(['./rev/*.json', './application/**/header.php']) //- 讀取 rev-manifest.json 文件以及需要進行css名替換的文件
.pipe(revCollector()) //- 執行文件內css名的替換
.pipe(gulp.dest('./application/')); //- 替換後的文件輸出的目錄});
gulp.task('default', ['concat', 'rev']);
運行結果
通過以上的配置之後，就可以開始運行 gulp 對我們的項目進行相關的操作啦；
使用 gulp 命令，運行Gulp.js 構建程序
首先運行 concat 這個 task 生成一個 rev-manifest.json 文件
然後再運行 rev 這個 task 替換掉文件中引入的 css
YuanWingdeMacBook-Pro:m YuanWing$ gulp concat
[11:47:02] Using gulpfile ~/SVN/JKD/m/gulpfile.js
[11:47:03] Starting 'concat'...
[11:47:03] Finished 'concat' after 12 msYuanWingdeMacBook-Pro:m YuanWing$ gulp rev
[11:47:17] Using gulpfile ~/SVN/JKD/m/gulpfile.js
[11:47:17] Starting 'rev'...
[11:47:17] Finished 'rev' after 10 msYuanWingdeMacBook-Pro:m YuanWing$
rev-manifest.json文件內容：
{ "wap.min.css": "wap.min-c49f62a273.css"}
header.php替換前後對比：
替換前：<link rel="stylesheet" href="/css/wap.min.css" />
替換後：<link rel="stylesheet" href="/css/wap.min-c49f62a273.css" />
gulp-rev-collector進行文件路徑替換是依據 rev-manifest.json 的，所以要先成生 .json 文件，然後再進行替換；
7. 如何利用node進行js css合並壓縮
gulp是基於Node.js的前端構建工具。所以首先需要安裝nodejs，安裝nodejs。
完成nodejs安裝之後，需要使用npm安裝gulp。
先安裝全局gulp
npm install -g gulp然後在項目根目錄下安裝本地gulp。
此時項目根目錄下會多出下面這個文件夾 node_moles
好的，現在gulp已經安裝完成了，但是gulp本身不提供js壓縮合並等功能，需要使用gulp的相關插件。目前只需要完成js壓縮合並和css文件壓縮的功能，先安裝相應的插件：
1.css壓縮 gulp-minify-css
2.js壓縮 gulp-uglify
3.js合並 gulp-concat
由於壓縮之前需要對js代碼進行代碼檢測，壓縮完成之後需要加上min的後綴，我們還需要安裝另外兩個插件：
8. gulp 打包css 可以設置順序嗎
可以這樣的寫法：
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目錄
9. 為什麼用gulp把多個js文件合並壓縮後，再直接引入頁面就報錯了
合並成一個JS文件之後，代碼的作用域擴大，難免會造成沖突。找到報錯的代碼所在位置，找到原JS文件修改下。
舉個例子：a.js 中有var foo = 1; b.js 中也有 var foo = 10; 那麼合並之後就會有兩個 foo 變數， 這樣一來在新的js文件中，foo的值就是寫在後面的一個，而恰好後面的值會沖突報錯。
因此，在合並之前需要確定每個js文件都能正常工作，而且沒有函數、變數上的沖突。
10. 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)