Gulp安裝筆記

時間 2019-11-12

標籤 gulp 安裝筆記欄目 JavaScript 简体版

原文原文鏈接

前言css

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

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

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

基本安裝npm

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

npm install gulp -g

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

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

npm install gulp --save-dev

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

說明安裝成功了ruby

忍不住點進去會發現有一個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');