gulp插件的使用方式我们参照官方给出来的文档进行使用。

使用第三方插件步骤：

gulp插件使用的是commonJS规范

一、先去下载插件到本地

打开Node.js command prompt，使用命令cnpm install 插件名字 --save-dev或cnpm i 插件名字 -D进行插件下载到本地

二、通过require()引入文件

当将相对应的插件下载到本地后，我们在gulpfile.js文件里引入我们下载好的插件。

  1. //sass编写成css的插件:gulp-sass
  2. const sass = require("gulp-sass");
  3. //压缩css的插件：gulp-minify-css
  4. const minifyCSS = require("gulp-minify-css");
  5. //重命名插件 gulp-rename
  6. const rename = require("gulp-rename");

三、查阅并使用插件

一般在开发的时候都会有两个版本的代码，一个是开发版，另一个是上线版。开发版是没有对文件进行压缩，上线是对文件进行了压缩。

  1. gulp.task("sass", function(){
  2.     return gulp.src("stylesheet/index.sass")
  3.     .pipe(sass())
  4.     .pipe(gulp.dest("dist/css"))
  5.     .pipe(minifyCSS())
  6.     .pipe(rename("index.min.css"))
  7.     .pipe(gulp.dest("dist/css"));
  8. })

四、专门处理js的一些插件

  1. /* 
  2.     处理JS文件的插件
  3.     gulp-concat     合并JS文件
  4.     gulp-uglify     压缩.js文件
  5. */
  6. const concat = require("gulp-concat");    
  7. const uglify = require("gulp-uglify");
  9. gulp.task("scripts", function(){
  10.     return gulp.src("javascript/*.js")    //原路径
  11.     .pipe(concat("index.js"))        //合并
  12.     .pipe(gulp.dest("dist/js"))        //放置合并文件的位置
  13.     .pipe(uglify())            //压缩
  14.     .pipe(rename("index.min.js"))        //重命名
  15.     .pipe(gulp.dest("dist/js"));        //放置文件的位置
  16. })

五、gulp-connect服务器