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/'));

           });