前端工具Gulp的學習

   好久之前就據說過，若是想在作好一個真正的web前端工程師，必需要會自動化構建工具。好比Grunt,Gulp,webpack。總聽大神說用這些工具來構建一個自動化的前端環境，什麼文件壓縮，文件合併，js語法檢查，css自動添加前綴，編譯less/sass，自動刷新頁面，文件重命名等。配置好文件後，一個命令就能讓整個流程跑起來。想一想也是多麼的炫酷，因而，帶着種種疑問，從上週就開始了對Gulp的學習，一週時間算是對Gulp有個入門的瞭解了，也踩了很多坑。

   先搭建一個環境吧。準備步驟。（直接口述了，就不放圖了。）

    1，到nodejs官網下載一個nodejs安裝程序，而後安裝nodejs，點擊默認安裝就好了。此時，會自動給系統添加一個環境變量，所以在系統的Path環境變量中就會有nodejs的安裝路徑，若是沒有，本身手動添加便可。

    2，因爲如今nodejs都集成了npm，所以，打開命令行工具後，依次輸入 node -v  ,  npm -v 看看是否可以成功打印出 版本號，若是以爲npm版本太低，能夠 用 npm i npm -g更新。i是install的縮寫。此外還能夠用   npm config get prefix 找到npm的安裝路徑。

    3，全局安裝 gulp， npm install gulp -g  ,安裝完成後，gulp就安裝在了npm下面的node_modules文件夾下。

    4，增長系統NODE_PATH的環境變量，通常都是在    C:\Users\Administrator(這個根據你你本身的定)\AppData\Roaming\npm\node_modules。

    5，設置完成後，cmd中輸入 gulp -v ,若是可以正確輸出版本號，說明下載gulp成功，環境配置也成功了。

    6，實戰demo了。此時咱們找個位置，好比桌面上，新建一個文件夾，建好目錄結構。好比取名  gulp-demo，完後咱們cd desktop/gulp-demo,就進入了gulp-demo項目了。首先，咱們輸入命令npm init,一路enter,該命令會保存咱們的所用到的以及配置的信息。方便咱們在另外一個環境上按照上面的信息來安裝包。而後咱們須要在本地，也就是在項目內安裝gulp以及各類模塊。       npm i gulp --save-dev     （--save就會將模塊信息保存到package.json中）  。

再在根目錄新建一個gulpfile.js文件，來配置咱們的任務。

    7，文件合併，文件壓縮，語法檢查，監聽文件變化。先搞這四個吧。

    

var gulp = require('gulp');
var jshint = require('gulp-jshint');//語法檢查
var concat = require('gulp-concat');//合併文件
var uglify = require('gulp-uglify');//壓縮代碼
var rename = require('gulp-rename');//重命名
// 語法檢查
gulp.task('jshint', function () {
return gulp.src('public/javascripts/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// 合併文件以後壓縮代碼
gulp.task('minify', function (){
return gulp.src('public/javascripts/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('public/javascripts/dist'))
.pipe(uglify())
.pipe(rename('all.min.js'))
.pipe(gulp.dest('public/javascripts/dist'));
});
// 監視文件的變化
gulp.task('watch', function () {
gulp.watch('public/javascripts/*.js', ['jshint', 'minify']);
});
// 註冊缺省任務
gulp.task('default', ['jshint', 'minify', 'watch']);

 

 因爲本人也還剛處於入門階段，若是有不對的地方，但願批評與指教。3q。