gulp入門篇(一）

1.gulp簡介:

  gulp是一個前端自動化的工具【構建工具】,使用流(stream)來處理內容。

2. gulp的主要用於:

搭建web服務器

使用預處理器Sass，Less

壓縮優化資源，可以壓縮JS CSS Html 圖片

自動將更新變化的代碼實時顯示在瀏覽器【前端實時化】

gulp還提供瞭豐富的插件,可自行查詢……

3. gulp使用的前提

安裝node.js

在項目根目錄下執行 npm init  創建package.json.

npm install gulp -g //全局安裝

npm install gulp –save-dev //本地安裝並加入package.json

推薦：第2種,安裝gulp模塊,並且添加依賴到package.json文件。

4.gulp常見的api

gulp.src() : 獲得資源

gulp.dest(): 輸出資源

gulp.task():創建任務

gulp.watch():監視文件系統,文件改動時自動處理

gulp.pipe():管道

5.gulp使用說明

  默認情況下 gulp 運行的時候會引入項目目錄下的 gulpfile.js 文件

  在根目錄下創建gulpfile.js

在gulpfile.js文件中編寫gulp任務代碼.

gulpfile.js：

var gulp = require('gulp'),
    browserSync = require('browser-sync').create(),
    uglify = require('gulp-uglify'), //壓縮js代碼
    minifycss = require('gulp-minify-css'), //壓縮css代碼
    rename = require('gulp-rename'), //重命名
    clen = require('gulp-clean'); //清理檔案


//靜態服務器
gulp.task('server', function() {
    browserSync.init({   //服務器配置
        server: {
            baseDir: "./"
        }
    });
    //監控文件變化,保存時自動刷新瀏覽器.
    gulp.watch("*.html").on('change', browserSync.reload);
    gulp.watch("dist/js/*.js", ['js-watch']);
    gulp.watch("dist/css/*.css", ['css']);
});

//處理css代碼的任務
gulp.task('css',['clean'],function(){
  return gulp.src('dist/css/*.css')
  .pipe(minifycss())
  .pipe(rename('index.min.css'))
  .pipe(gulp.dest('src/css'))
  .pipe(browserSync.stream()); //css代碼變化時刷新的寫法1
  //pipe(browserSync.reload({stream:true}))//寫法2
});

//js代碼的處理
gulp.task('js',['clean'],function(){
  return gulp.src('dist/js/*.js')
    .pipe(uglify()) 
    .pipe(rename('index.min.js'))
    .pipe(gulp.dest('src/js'));
});

//監視js代碼的變化
gulp.task('js-watch', ['js'], browserSync.reload);

//gulp clean:
gulp.task('clean',function(){
   return gulp.src(['src/js','src/css'],{read:false}).pipe(clean());
});


//配置默認的任務
gulp.task('default',['server'],function(done){
  done();
});

說明

1. var uglify = require(‘gulp-uglify’); 是為瞭在模塊中找到’gulp-uglify’賦值給變量uglify，在文件中使用.

2. 使用模塊插件需要先本地安裝，例如:

  npm intsall gulp-uglify –save-dev

3. gulp.task(str,option,fn)

  str為任務名稱,唯一標識任務，option為任務名數組，在此任務執行前先觸發的任務，fn為回調函數。

特別註意option裡的任務

– 同步:

gulp.task('default', ['clean', 'less', 'images', 'js', 'watch']); 

– 異步:

gulp.task('default', ['clean'], function(){ 

     gulp.start('less', 'images', 'js', 'watch'); 

 });  

gulp還能做什麼?

gulp能做的遠不止這些,作為設計理念領先的構建工具，gulp的魅力遠不止於此。

其它的插件:

gulp-jshint: js代碼靜態檢查工具

gulp-sass: sass的預處理器

gulp-autoprefixer:根據設置瀏覽器版本自動處理瀏覽器前綴

gulp-imagemin：圖片壓縮

gulp-concat:合並文件

gulp-rev：對文件名加MD5後綴