gulp的安裝和配置

 

gulp的安裝和使用方法

 

1先是有node為前提的，

2安裝淘寶鏡像

 　2.1因為很多npm包都是國外的，所以安裝起來很慢，所以我們可以利用淘寶的鏡像服務器來進行安裝后續的包，速度和成功率會高很多。 
　所以首先打開cmd，輸入指令： npm --registry=https://registry.npm.taobao.org install -g cnpm

3是安裝gulp

 首先，新建一個用來項目開發的空文件夾，然后再命令行工具里cd到文件夾中(有git的童鞋在文件夾里直接右鍵 git bash here也是Ok的) 
   然后執行以下 npm init,會發現文件夾中多出一個 
   然后在命令行中執行 npm init,效果如下圖，一路無腦回車即可 
 
   執行完成后你會發現原本的空文件夾里多出了一個叫package.json的文件。說明執行成功啦。 
  完成后接着執行指令： 
  npm install --save-dev gulp 
注意:1.命令行工具一定要進入到這個用來項目開發的空文件夾 
   2.這里不要使用cnpm，使用npm即可（親身經歷，用cnpm之后運行gulp的時候會報錯，大概是cnpm的某些包不全）

  接下來需要等待一會兒，完成后，需要去文件夾的根目錄中，新建一個名為gulpfile.js的javascript文件，寫入內容如下:

1 var gulp = require('gulp');
2 
3 gulp.task('default', function() {
4   // 將你的默認的任務代碼放在這
5 });

最后在命令行里執行指令: glup 回車 
 
效果如上圖，則說明glup已經成功安裝在項目中啦~ 

----以上引用的是http://www.cnblogs.com/YuuyaRin/p/6159809.html

 3.1--save-dev和--save的區別

• 會把gulp包安裝到node_modules目錄中
• 會在package.json的dependencies屬性下添加gulp
• 之后運行npm install命令時，會自動安裝gulp到node_modules目錄中
• --save---之后運行npm install --production或者注明NODE_ENV變量值為production時，會自動安裝gulp 到node_modules目錄中(開發完后需要用到依賴包，如jquery等)
• --save-dev--之后運行npm install --production或者注明NODE_ENV變量值為production時，不會自動安裝gulp 到node_modules目錄中（發布后用不到它，而只是在我們開發才用到它

4使用gulp壓縮和合並js文件

在之前建立的項目中寫入，在根目錄新建js文件夾，並在文件夾中新建兩個js文件，代碼如下：

index.js:

var index={};
index={
    test:function(argument){
        console.log('test');
    }
}
index.test();

main.js:

var main = {};
main.test=function(argument){
    console.log("main test");
}
main.test();

 

 

在根目錄新建文件夾build，並在build里新建一個空的js文件：all.min.js

在根目錄下新建index.html ，在其中引用build下的all.min.js。

index.html:

<script type="text/javascript" src="build/all.min.js"></script>

接下來編輯gulpfile.js文件，來告訴gulp我們要把index.js，main.js合並起來壓縮再寫入all.min.js中

 

gulpfile.js:

var gulp = require('gulp');//gulp自身
var uglify= require('gulp-uglify');//<span style="font-family: Arial, Helvetica, sans-serif;">引入壓縮組件</span>
var concat = require('gulp-concat');//<span style="font-family: Arial, Helvetica, sans-serif;">引入合並組建</span>

var paths = {
    scripts:['js/index.js','js/main.js']  //['js/*.js','!js/changDateFormat.js']排除所有文件中的changDateFormat.js文件
} //定義要操作的文件路徑


gulp.task('default', function() {   //當這里"default"寫成其他的名字(如:asd)時,在運行時就余需要用 gulp asd
  gulp.src(paths.script)//找到項目下paths變量所定義的script文件
  .pipe(uglify())//壓縮
  .pipe(rename({ suffix: "-min",prefix:"bon-",extname:".md"}))//suffix加后綴，prefix加前綴，extname修改文件格式（是js還是html等）
  .pipe(concat('all.min.js'))//輸入到all.min.js中
  .pipe(gulp.dest('build'));//指定目錄
});

 

 

tips:gulp的執行流程采用了流式操作，每一個pipe()可以理解成，上一個操作的輸出，就是下一個操作的輸入，比如uglify()壓縮后輸出的，就是concat要輸入到文件中的，而concat輸出的文件，是gulp.dest要加入的目錄中的，可以理解成每部操作都return了下一步要使用的東西。

 

最終目錄結構如下：

接下來就可以在命令行工具中cd到項目的根目錄中執行gulp指令了。

此時也許會出現 Cannot find module 'gulp-uglify'這樣的報錯，是因為gulpfile所require的gulp-uglify和gulp-concat插件並不存在，所以可以利用npm在項目中裝入即可：

npm install --save-dev gulp-uglify    回車

npm install --save-dev gulp-concat   回車

可同時下載gulp-uglify和gulp-concat(用"空格"將兩個文件隔開就好)npm install --save-dev gulp-uglify gulp-concat

4.1引入組件

var gulp = require("gulp");//導入glup
var sass = require("gulp-sass");//拷貝並編譯scss
var server = require("gulp-connect");//建立服務器
var concat = require("gulp-concat");//合並js文件
var uglify = require("gulp-uglify");//壓縮js文件
var minifyCss = require("gulp-minify-css");壓縮css
var imagemin = require("gulp-imagemin");壓縮圖片
var rename = require("gulp-rename");//文件重命名
var rev = require("gulp-rev");//給靜態資源文件名添加一個哈希值后綴
var revCollector = require("gulp-rev-collector");//自動添加版本號
var autoprefixer = require("gulp-autoprefixer");//對css添加瀏覽器后綴
var htmlmin = require("gulp-htmlmin");//對html頁面進行壓縮

 

安裝完成后再次執行gulp指令，成功后，可以查看一下我們原本空的all.min.js文件，可以看到main.js和index.js已經在all.min.js中壓縮合並了

var index={};index={test:function(e){console.log("test")}},index.test();
var main={};main.test=function(n){console.log("main test")},main.test();

 

然后運行一下我們的index.html，打開瀏覽器控制台，會發現兩個js的內容成功輸出：

說明gulp成功執行了JS文件的合並與壓縮的操作。