gulp的基本使用

gulp的基本使用

1. 安装
   首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp：
   npm install -g gulp
   然后本地安装：
   全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一 次。把目录切换到你的项目文件夹中，然后在命令行中执行：
   npm install gulp
   如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上–save-dev：
   npm install --save-dev gulp
   安装成功后 在项目根目录创建 gulpfile.js文件 之后可以开始编写代码

2. 压缩js文件
   先安装：npm install --save-dev gulp-uglify
   示例如下：

    var gulp = require('gulp'),
   	      uglify = require("gulp-uglify");
   		  gulp.task('minify-js', function () {
   	      gulp.src('js/*.js') // 要压缩的js文件
   	     .pipe(uglify())  //使用uglify进行压缩,更多配置请参考：
   	     .pipe(gulp.dest('dist/js')); //压缩后的路径
        });
   
   

3. 压缩css文件
   先安装：npm install --save-dev gulp-minify-css
   示例如下：

    var gulp = require('gulp'),
        minifyCss = require("gulp-minify-css");
   	 gulp.task('minify-css', function () {
       gulp.src('css/*.css') // 要压缩的css文件
      .pipe(minifyCss()) //压缩css
      .pipe(gulp.dest('dist/css'));
   });
   

4. 压缩html文件
   先安装：npm install --save-dev gulp-minify-html
   示例如下：

   var gulp = require('gulp'),
       minifyHtml = require("gulp-minify-html");
       gulp.task('minify-html', function () {
       gulp.src('html/*.html') // 要压缩的html文件
      .pipe(minifyHtml()) //压缩
      .pipe(gulp.dest('dist/html'));
   });
   

   5.js代码检查
   先安装：npm install --save-dev gulp-jshint
   示例如下：

     var gulp = require('gulp'),
          jshint = require("gulp-jshint");
          gulp.task('jsLint', function () {
          gulp.src('js/*.js')
         .pipe(jshint())
         .pipe(jshint.reporter()); // 输出检查结果
     });
   

   6.文件合并
   先安装：npm install --save-dev gulp-concat
   示例如下：

   var gulp = require('gulp'),
       concat = require("gulp-concat");
       gulp.task('concat', function () {
       gulp.src('js/*.js')  //要合并的文件
       .pipe(concat('all.js'))  // 合并匹配到的js文件并命名为 "all.js"
       .pipe(gulp.dest('dist/js'));
   });
   

   7.图片压缩
   先安装：npm install --save-dev gulp-imagemin
   示例如下：

   var gulp = require('gulp');var imagemin = require('gulp-imagemin');var pngquant = require('imagemin-pngquant'); //png图片压缩插件
   gulp.task('default', function () {
      return gulp.src('src/images/*')
          .pipe(imagemin({
               progressive: true,
              use: [pngquant()] //使用pngquant来压缩png图片
          }))
          .pipe(gulp.dest('dist'));
   });
   

   8.less和sass的编译
   安装less：npm install --save-dev gulp-less
   安装sass：npm install --save-dev gulp-sass
   示例如下：

   var gulp = require('gulp'),
       less = require("gulp-less");
       sass = require("gulp-sass");
       gulp.task('compile-less', function () {
       gulp.src('less/*.less')
       .pipe(less())
       .pipe(gulp.dest('dist/css'));
   });
   gulp.task('compile-sass', function () {
       gulp.src('sass/*.sass')
       .pipe(sass())
      .pipe(gulp.dest('dist/css'));
   });
   

   以上整理希望对你有所帮助