gulp 打包合併

1.安裝node.js  下載地址： http://nodejs.cn/

   打開node.js 命令行，輸入： node  -v ，有版本號，則正確安裝。

2.安裝淘寶鏡像 ：命令行輸入 ：

目的：使下在速度更快。

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運行的入口npm install -g cnpm --registry=http://registry.npm.taobao.org

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.只能說入個門，還有更多的功能。多看高人博客吧或官網。