gulp學習記錄

gulp原生方法

• gulp.src()    src方法指定須要處理的源文件路徑

        例如：gulp.src('src/js/*.js')      gulp.src(['src/**/*',‘!src/a.js‘])

        「*」：匹配全部文件    例：src/*.js(包含src下的全部js文件)；

        「**」：匹配0個或多個子文件夾    例：src/**/*.js(包含src的0個或多個子文件夾下的js文件)；

       「{}」：匹配多個屬性    例：src/{a,b}.js(包含a.js和b.js文件)  src/*.{jpg,png,gif}(src下的全部jpg/png/gif文件)；

        「!」：排除文件    例：!src/a.js(不包含src下的a.js文件)；

• gulp.dest()   dest方法指定處理完成後文件的輸出路徑
• gulp.task()   定義一個gulp任務
     gulp.task('任務名稱',['依賴的任務（可選）’],function(){
     })
• gulp.watch()    watch用於監聽文件變化

gulpfile文件經常使用函數

• 拷貝文件

gulp.task('copy', function(){

         gulp.src('src/fonts/**/*')

                .pipe(gulp.dest('dist/fonts/'))

     })

• 建立本地服務器

var connect=require('gulp-connect');

       gulp.task('myServer', function() {

                connect.server({

                     root: 'app',
                     port: 8000,
                     livereload: true
                 });
        });

        //其中root是服務啓動的根目錄，換句話說別人經過IP+Port端口訪問到你的服務器所訪問到文件夾就是root（這裏是'app'），port就是端口了，livereload是一個標誌，爲true時gulp會自動檢測文件的變化而後自動進行源碼構建。 

• 合併文件

  var concat = require('gulp-concat');
  
  gulp.task('concat', function () {
  
      gulp.src('src/js/*.js')
  
          .pipe(concat('all.js'))//合併後的文件名
  
          .pipe(gulp.dest('dist/js'));
  
  });

   

• 壓縮html文件

  var htmlmin = require('gulp-htmlmin');
  
  gulp.task('testHtmlmin', function () {
  
      var options = {
  
          removeComments: true,//清除HTML註釋
  
          collapseWhitespace: true,//壓縮HTML
  
          collapseBooleanAttributes: true,//省略布爾屬性的值 <input checked="true"/> ==> <input />
  
          removeEmptyAttributes: true,//刪除全部空格做屬性值 <input id="" /> ==> <input />
  
          removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"
  
          removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
  
          minifyJS: true,//壓縮頁面JS
  
          minifyCSS: true//壓縮頁面CSS
  
      };
  
      gulp.src('src/html/*.html')
  
          .pipe(htmlmin(options))
  
          .pipe(gulp.dest('dist/html'));
  
  });

   

• 壓縮js文件

 var uglify = require('gulp-uglify')

    gulp.task('uglifyjs', function () {

         gulp.src('src/js/**/*.js')  
                .pipe(uglify())
                .pipe(gulp.dest('dist/js'))

      })

• 壓縮圖片

  var imagemin = require('gulp-imagemin');
  
  gulp.task('Imagemin', function () {
  
      gulp.src('src/img/*.{png,jpg,gif,ico}')
  
          .pipe(imagemin())
  
          .pipe(gulp.dest('dist/img'));
  
  });

   

• 壓縮css文件

  var minifycss = require('gulp-minify-css')
  
  gulp.task('testCssmin', function () {
  
      gulp.src('src/css/*.css')
  
          .pipe(minifycss())
  
          .pipe(gulp.dest('dist/css'));
  
  });

   

• 編譯less文件

 var less=require('gulp-less');

        gulp.task('less',function(){

            gulp.src('src/**/*.less')

                    .pipe(less())

                    .pipe(gulp.dest('src/css/'));

           });