Gulp安裝筆記(轉)已經測試過

前言

總的來講，玩gulp的流程是這樣的：

安裝nodejs -> 全局安裝gulp -> 項目安裝gulp以及gulp插件 -> 配置gulpfile.js -> 運行任務

說實在的，我並非很清楚gulp是幹什麼的，可是每一個人都說好，出於好奇心，忍不住就來研究一下，因此，搞清楚這個流程仍是頗有必要的。

 

基本安裝

安裝gulp以前咱們須要安裝nodejs的環境，檢測可以正常使用npm後，咱們用npm對gulp進行一次全局安裝

npm install gulp -g

隨便在哪一個路徑下面均可以進行全局安裝

 

安裝好了之後咱們創建一個test做爲項目主路徑，而後在cmd裏cd到這個路徑用npm對gulp進行依賴安裝

npm install gulp --save-dev

完過後發現項目路徑下多了一個文件夾

說明安裝成功了

忍不住點進去會發現有一個package.json ，目前我暫時還不知道是幹嗎的，只不過看網上不少人說這玩意兒頗有用，先看看長什麼樣子老是好的。

 

 

 

插件安裝

要使用gulp就必須使用gulp的插件，如下是我在網上搜索到的gulp插件：

sass的編譯（gulp-ruby-sass）

自動添加css前綴（gulp-autoprefixer）

壓縮css（gulp-minify-css）

js代碼校驗（gulp-jshint）

合併js文件（gulp-concat）

壓縮js代碼（gulp-uglify）

壓縮圖片（gulp-imagemin）

自動刷新頁面（gulp-livereload）

圖片緩存，只有圖片替換了才壓縮（gulp-cache）

更改提醒（gulp-notify）

清除文件（del）

 

至於怎麼安裝嘛，仍是要靠npm，能夠一次性安裝多個，module name能夠無限累加。

npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache gulp-less del --save-dev

 

 

npm install gulp-ruby-sass --save-dev
npm install gulp-autoprefixer --save-dev
npm install gulp-minify-css --save-dev
npm install gulp-jshint --save-dev
npm install gulp-concat --save-dev
npm install gulp-uglify --save-dev
npm install gulp-imagemin --save-dev
npm install gulp-notify --save-dev
npm install gulp-rename --save-dev
npm install gulp-livereload --save-dev
npm install gulp-cache --save-dev
npm install del  --save-dev
npm instal gulp-less --save-dev

 

 

路徑仍是在項目路徑下

安裝完成後會發如今項目下的gulp文件夾多出了許多插件的文件夾

 

 

加載插件

插件安裝完成了之後就須要使用，使用以前必須先加載，咱們使用require的方法來加載。

在此以前咱們先要在項目的根路徑下創建一個名爲gulpfile.js的文件，別問我爲何，我也不知道。

而後咱們能夠在裏面寫入咱們引用插件的代碼，最簡單的代碼以下：

var gulp = require('gulp');

gulp.task('default', function() {
  // 將你的默認的任務代碼放在這
});

咱們把咱們剛纔安裝的插件全都加載進來

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    del = require('del');

而後咱們在cmd裏輸入gulp命令，結果以下

這個名爲default的task沒有作任何事情，具體要作一些壓縮之類的操做還得查閱更多的API。

若是想單獨執行一個task，就直接輸入"gulp <task name>"，好比咱們想單獨執行default這個task就能夠這樣

gulp default

 

到這裏，咱們的gulp環境就部署好了。

 

 

附：gulp插件github地址或API地址

 

sass的編譯（gulp-ruby-sass） https://github.com/sindresorhus/gulp-ruby-sass

自動添加css前綴（gulp-autoprefixer） https://github.com/Metrime/gulp-autoprefixer

壓縮css（gulp-minify-css） https://github.com/murphydanger/gulp-minify-css

js代碼校驗（gulp-jshint） https://github.com/spalger/gulp-jshint

合併js文件（gulp-concat） https://github.com/contra/gulp-concat

壓縮js代碼（gulp-uglify） https://github.com/terinjokes/gulp-uglify

壓縮圖片（gulp-imagemin） https://github.com/sindresorhus/gulp-imagemin

自動刷新頁面（gulp-livereload） https://github.com/vohof/gulp-livereload

圖片緩存，只有圖片替換了才壓縮（gulp-cache） https://github.com/jgable/gulp-cache

更改提醒（gulp-notify） https://github.com/mikaelbr/gulp-notify

清除文件（del） https://www.npmjs.com/package/del

 

漏了一個地方，我加上：

在項目根目錄下建立gulpfile.js文件，而後編寫以下代碼（最經常使用的代碼），這些代碼沒什麼好解釋的，具體能夠參考gulp的api

// 獲取 uglify 模塊（用於壓縮 JS）
var uglify = require('gulp-uglify');
var cssUglify = require('gulp-minify-css');
var imageMin = require('gulp-imagemin');

// 壓縮 js 文件
// 在命令行使用 gulp script 啓動此任務
gulp.task('script', function() {
// 1. 找到文件
gulp.src('js/*.js')
// 2. 壓縮文件
.pipe(uglify({ mangle: false }))
// 3. 另存壓縮後的文件
.pipe(gulp.dest('dist/js'))
})

gulp.task('auto',function(){
gulp.watch('js/*.js',['script']);
gulp.watch('css/*.css', ['css']);
gulp.watch('images/*.*', ['image'])
})

gulp.task('css',function(){
gulp.src('css/*.css')
.pipe(cssUglify())
.pipe(gulp.dest('dist/css'))
})

gulp.task('image',function(){
gulp.src('images/*.*')
.pipe(imageMin({progressive: true}))
.pipe(gulp.dest('dist/images'))
})

gulp.task('default',['script','auto','css','image']
)

實際的項目確定沒這麼簡單，想一想咱們通常不可能對某幾個文件操做，應該是對一批文件操做，那樣的涉及到文件匹配的問題了，暫時不展開了。