gulp前端自動化

前言

gulp的運行依賴與node.js，所以需保證node.js已經安裝，node.js的下載地址https://nodejs.org/en/ ,

如下操做在windows環境下完成，在其餘操做系統其實也是類似的

一，安裝gulp

cmd進入命令行輸入命令：

npm install -g gulp  //-g表示全局安裝

作項目依賴安裝

npm install --save-dev gulp

二，gulp使用 

1.新建js項目，例如：gulpTest

(1)初識gulp使用

在gulpTest根目錄下建立gulpfile.js文件，而後在gulpfile.js輸入如下代碼

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

gulpfile.js其實就是gulp運行構建的執行文件

在命令行執行：cd gulpTest 而後執行gulp便可

(2).使用gulp壓縮js文件

接着在gulpTest項目目錄下新建一個目錄js,而後在js目錄下建立一個app.js的文件並在該文件中寫入以下代碼

function sayHello(){
	console.log("hello");
}

打開gulpfile.js文件修改下里面的內容

var gulp = require('gulp');//加載gulp模塊
uglify = require('gulp-uglify');//加載gulp-uglify壓縮模塊
gulp.task('minify', function () {//自定一個名爲minify的gulp任務
   gulp.src('js/app.js')//載入js文件爲對象流
      .pipe(uglify())//經過管道將對象流傳遞給uplify()方法獲得壓縮後的文件對象流
      .pipe(gulp.dest('build'))//將壓縮後的文件對象流經過管道傳遞給gulp.test()方法輸出壓縮後的文件
});

而後在命令行執行：

npm install --save-dev gulp-uglify

gulp minify//任務名須要和本身定義的同樣，不然會出錯

執行完後會發如今gulp在gulpTest的根目錄下建立了一個build的文件夾同時也將壓縮後app.js文件輸出到build文件夾中

(3)使用gulp合併壓縮多個js文件

繼續上面的例子。在js文件夾下新建一個js文件app2.js並在在裏面輸入代碼

function sayWorld(){
	console.log("world");
}

接下來在gulpfile.js文件中加入一個新的gulp任務名爲js

var gulp = require('gulp');
    uglify = require('gulp-uglify');//加載壓縮插件
    jshint = require('gulp-jshint'),//加載js代碼驗證插件jshint
    concat = require('gulp-concat');//加載代碼合併插件concat
    rename = require('gulp-rename');//加載rename插件
gulp.task('default', function() {
  //dosome thing
});
//按js文件原名壓縮輸出
gulp.task('default', function () {
   gulp.src('js/*.js')
      .pipe(uglify())
      //壓縮重命名，例如me.js壓縮後變爲me.min.js，不須要可註釋掉
      .pipe(rename({suffix: '.min'}))
      .pipe(gulp.dest('build'))
});
//指定base後按源碼原路徑輸出
gulp.src('src/js/**/*.js', { base: 'src' })
  .pipe(minify())
  .pipe(gulp.dest('build'));  // Writes 'build/js/somedir/somefile.js'
});
gulp.task('minify', function () {
   gulp.src('js/app.js')
      .pipe(uglify())
      .pipe(gulp.dest('build'))
});
gulp.task('js', function () {
   return gulp.src('js/*.js')//通配符匹配js文件下的全部js文件
      .pipe(jshint())
      .pipe(jshint.reporter('default'))//輸出js代碼驗證信息
      .pipe(uglify())
      .pipe(concat('app.js'))//將代碼合併壓縮到app.js中文件中
      .pipe(gulp.dest('build'));//將壓縮合並的app.js輸出到build文件夾
});

在命令行輸入：

安裝插件

npm install --save-dev

gulp js//執行js任務

執行成功後會js目錄下app.js和app2.js合併壓縮到build下的app.js中

三，gulp.src()方法文件匹配實例

(1)匹配具體文件

js/app.js

(2)匹配某一文件夾全部文件

js/*.js //匹配js文件夾下全部.js結尾的文件

(3)匹配某一文件加下的js文件包括其子目錄

js/**/*.js

(4)不匹配指定的js文件

!js/app.js  //不匹配js文件夾中的app.js文件

(5)匹配多種文件

*.+(js|css)

(6)gulp.src多條件匹配

gulp.src(['js/**/*.js', '!js/**/*.min.js'])

四，gulp任務定義實例

(1)任務中執行其餘任務

gulp.task('build', ['css', 'js', 'imgs']);//經過build任務去執行gulp的css,js,imgs任務

(2)任務的前後順序

執行：gulp css時會等待greet任務執行完成再執行css任務

gulp.task('css', ['greet'], function () {
   //greet任務完成，幹本身想幹的事
});

五,gulp插件管理優化

前面的第二，三小節中在加載插件時一般在gulpfile.js的文件頭部寫入如下相似代碼

var gulp = require('gulp');
    uglify = require('gulp-uglify');//加載壓縮插件
    jshint = require('gulp-jshint'),//加載js驗證插件
    concat = require('gulp-concat');//加載代碼合併插件

在上面代碼中實際上jshint被加載了兩次，第一次運行時jshint只是給文件對象附加了jshint屬性沒有輸出任何的檢查信息而已，但後後面的

jsheet也是必須的，要解決這個問題可使用一個叫gulp-load-plugins插件，它能夠用來加載全部的gulp插件

注意：gulp-load-plugins會去掉被加載插件名的gulp前綴和'-',而且會採用駝峯命名規則對插件重命名，例如：gulp-ray-sass會被重命名爲raySass

下面開始體驗使用gulp-load-plugins插件來加載gulp插件

(1)修改gulpfile.js,修改後代碼以下

var gulp = require('gulp');
    gulpLoadPlugins = require('gulp-load-plugins'),//經過gulp-load-plugins加載插件
    plugins = gulpLoadPlugins();
gulp.task('default', function() {
  //do something
});
gulp.task('minify', function () {
   gulp.src('js/app.js')
      .pipe(uglify())
      .pipe(gulp.dest('build'))
});
gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(plugins.jshint())
      .pipe(plugins.jshint.reporter('default'))
      .pipe(plugins.uglify())
      .pipe(plugins.concat('app.js'))
      .pipe(gulp.dest('build'));
});

(2)在項目gulpTest根目錄先新建一個package.json的文件，並在文件中輸入如下內容

文件裏其實就是定義項目依賴的插件，這樣gulp-load-plugins就會自動根據package.json去加載所需插件

不知道版本號全使用最新

{
   "devDependencies": {
      "gulp-concat": "",
      "gulp-uglify": "",
      "gulp-jshint": "",
      "gulp-load-plugins": "",
      "jshint":"",
      "gulp": ""
   }
}

 

而後運行：

npm install --save-dev

gulp js

一樣輸出壓縮後的js