這年頭，不用點道具（gulp），你都不好意思說你是做前端的

如果你很熟悉命令行，直接跳到步驟四。

為了確保Node已經正確安裝，我們執行幾個簡單的命令。

node -v

回車（Enter），如果正確安裝的話，你會看到所安裝的Node的版本號，接下來看看npm。

npm -v

這同樣能得到npm的版本號。

如果這兩行命令沒有得到返回，可能node就沒有安裝正確，嘗試重啟下命令行工具，如果還不行的話，只能回到第一步進行重裝。

第三步：定位到項目

現在，我們已經大致了解了命令行并且知道如何簡單使用它，接下來只需要兩個簡單的命令就能定位到文件目錄并看看目錄里都有些什么文件。

• cd 定位到目錄

  </li>

• ls 列出文件列表

  </li> </ul>

  建議多敲敲這兩個命令，了解文件系統并知道文件都在哪里。

  </div>

  習慣使用了這兩個命令后，就要進入我們的項目目錄，這個目錄各不相同，舉個例子，這是我進入我項目目錄的命令：

  cd /Applications/XAMPP/xamppfiles/htdocs/my-project

  成功進入項目目錄后，我們開始安裝gulp。

  第四步：安裝gulp

  我們已經知道如何使用命令行，現在嘗試點新的東西，認識npm然后安裝gulp。

  在命令行中輸入

  sudo npm install -g gulp 

  1. sudo 是以管理員身份執行命令，一般會要求輸入電腦密碼；

     </li>

  2. npm 是安裝node模塊的工具，執行install命令；

     </li>

  3. -g 表示在全局環境安裝，以便任何項目都能使用它；

     </li>

  4. 最后，gulp是將要安裝的node模塊的名字。

     </li> </ol>

     運行時注意查看命令行有沒有錯誤信息，安裝完成后，你可以使用下面的命令查看gulp的版本號以確保gulp已經被正確安裝。

     gulp -v

     接下來，我們需要將gulp安裝到項目本地

     npm install —-save-dev gulp

     這里，我們使用 —-save-dev 來更新package.json文件，更新 devDependencies 值，以表明項目需要依賴gulp。

     Dependencies 可以向其他參與項目的人指明項目在開發環境和生產環境中的node模塊依懶關系，想要更加深入的了解它可以看看package.json文檔。

     第五步：新建Gulpfile文件，運行gulp

     安裝好gulp后我們需要告訴它要為我們執行哪些任務，首先，我們自己需要弄清楚項目需要哪些任務。這里舉例出幾個很常用的功能。

     • 檢查js這里使用的是gulp-jshint外掛來完成這項功能；

       </li>

     • 編譯sasssass是一種css預處理語言，它彌補了css本身無法完成像其它編程語言一樣的嵌套、繼承、設置變量等工作。這里使用gulp-compass外掛來完成這項功能。使用gulp-compass需要先安裝compass，因為這篇文章的主角是gulp，所以暫且不對compass做過多說明了。如果想知道copmass安裝方法可以先自行百度，以后呢，我也會出有關compass方面的文章，敬請期待咯~

       </li>

     • 合并js這里使用gulp-concat外掛來完成這項功能；

       </li>

     • 壓縮并重命名合并后的js這里使用gulp-uglify外掛和gulp-rename外掛配合來完成這項任務。

       </li> </ul>

       安裝依賴

       npm install gulp-jshint gulp-compass gulp-concat gulp-uglify gulp-rename --save-dev

       提醒下，如果以上命令提示權限錯誤，需要添加 sudo 再次嘗試。

       </div>

       新建gulpfile文件

       現在，組件都安裝完畢，我們需要新建gulpfile文件以指定gulp需要為我們完成什么任務。

       gulp只有五個方法： task ， run ， watch ， src ，和 dest ，在項目根目錄新建一個js文件并命名為gulpfile.js。我按照代碼書寫順序貼上代碼并依次講解，大家把每一塊代碼拼接在一起就是完整文件了。多感人啊~多么有節操呀~大家用起來一點不打麻煩~

       引入外掛

       var gulp = require('gulp'),
           jshint = require('gulp-jshint'),
           compass = require('gulp-compass'),
           concat = require('gulp-concat'),
           uglify = require('gulp-uglify'),
           rename = require('gulp-rename');

       這一步，我們引入了核心的gulp和其他依賴組件，接下來，分開創建lint, sass, scripts 和 default這四個不同的任務。

       Lint任務

       gulp.task('lint', function() {
           gulp.src('./js/*.js')
               .pipe(jshint())
               .pipe(jshint.reporter('default'));
       });

       Link任務會檢查 js/ 目錄下得js文件有沒有報錯或警告。

       Compass任務

       gulp.task('compass', function() {
           gulp.src(['scss/**/**/*.scss','!scss/lib/*.scss'])
               .pipe(compass({
                   config_file: './config.rb',
                   css: 'css',
                   sass: 'scss',
                   comments: true
               }))
               .pipe(gulp.dest('css'));
       }); 

       Compass任務會編譯scss/目錄下的scss文件，并把編譯完成的css文件保存到/css目錄中。

       Compass配置

       這里我要著重說明一下gulp-compass中的幾個至關重要的配置項。

       comments

       默認：false

       描述：是否顯示注釋。

       </div>

       css

       默認：css

       描述：指定輸出的css文件目錄。

       </div>

       sass

       默認：sass

       描述：指定待編譯的scss文件目錄。

       </div>

       css sass 配置內容必須要和 config.rb 文件中的 css sass 項配置內容相同，否則無法完成編譯。

       </div>

       Scripts 任務

       gulp.task('scripts', function() {
           gulp.src('./js/*.js')
               .pipe(concat('all.js'))
               .pipe(gulp.dest('./dist'))
               .pipe(rename('all.min.js'))
               .pipe(uglify())
               .pipe(gulp.dest('./dist'));
       }); 

       scripts任務會合并 js/ 目錄下得所有得js文件并輸出到 dist/ 目錄，然后gulp會重命名、壓縮合并的文件，也輸出到 dist/ 目錄。

       default任務

       gulp.task('default', function(){
           gulp.run('lint', 'compass', 'scripts');
           gulp.watch('./js/*.js', function(){
               gulp.run('lint', 'sass', 'scripts');
           });
       });

       這時，我們創建了一個基于其他任務的default任務。使用 .run() 方法關聯和運行我們上面定義的任務，使用 .watch() 方法去監聽指定目錄的文件變化，當有文件變化時，會運行回調定義的其他任務。

       現在，回到命令行，可以直接運行gulp任務了。

       gulp

       這將執行定義的default任務，換言之，這和以下的命令式同一個意思

       gulp default

       當然，我們可以運行在gulpfile.js中定義的任意任務，比如，現在運行sass任務：

       gulp compass

       結束語

       現在已經做到了設置gulp任務然后運行他們，現在再回顧下之前學習的。

       1. 學習了安裝Node環境

          </li>

       2. 學習了簡單使用命令行

          </li>

       3. 學習了用命令行進入項目目錄

          </li>

       4. 學習了使用npm和安裝gulp

          </li>

       5. 學習了如何運行gulp任務

          </li> </ol>

          另外，有一些參考資源供進一步學習：

          1. npm上得gulp組件

             </li>

          2. gulp的Github主頁

             </li>

          3. 官方package.json文檔

             </li> </ol>

             本文改編自老婆婆的文章 《前端構建工具gulp入門教程》

             1. npm是基于命令行的node包管理工具，它可以將node的程序模塊安裝到項目中，在 npm官網 中可以查看和搜索所有可用的程序模塊。拽拽的npm管理著眾多的基于node的前端工具，包括咱們這次的主角gulp。如果想查詢gulp各種外掛的api，只要通過這個網站搜索就好啦，簡直便利到爆，誰用誰知道。 ?
             </ol> 原文 http://segmentfault.com/a/1190000003507173
              本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
              轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
              本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
               本文地址：http://www.baiduhome.net/news/view/1bc9e68
             gulp

       相關資訊

       •  這年頭，不用點道具（gulp），你都不好意思說你是做前端的
       •  是時候升級你的gulp到4.0了
       •  媽媽說，你做區塊鏈別騙人啊！
       •  程序員都不讀書，但你應該讀
       •  也許你并不需要 Gulp， Grunt ?

       相關經驗

       •  Gulp 自動化你的前端
       •  前端構建大法 Gulp 系列 (三)：gulp的4個API 讓你成為gulp專家
       •  使用Gulp.js來自動化你的任務
       •  前端構建大法 Gulp 系列 (四)：gulp實戰
       •  知乎都全站 HTTPS 好久了, 你還好意思不懂 HTTPS?

       相關文檔

       •  8步安裝好你的hadoop
       •  Java解惑你知多少
       •  讓你不再害怕指針(指針總結)
       •  告訴你hadoop是什么
       •  WeakHashMap是如何清除不用的key的