前端自动化工具 -- gulp https://angularjs.org/

gulp是基于流的前端自动化构建工具。

gulp是基于stream流的形式,也就是前一个函数(工厂)制造出结果,提供后者使用。

同样的,也是包括基本用法和各插件的使用。

二、基本用法--插件使用

gulp所支持的插件也是很多的,使用方式跟基本的nodejs差不多。

下面统一介绍几个常见的 插件 ,更详细用法可以到对应官方站点查看API

使用它们,就要先install,可以直接在package.json中直接配置devDependencies依赖项,然后再统一 npm install

以下只是本人使用前端自动化gulp的一些方法,仅供参考

1、打开cmd,输入 npm install -g gulp ,在全局环境下安装gulp

2、回车,进入你想要压缩的文件夹里面,输入 npm install --save-dev gulp,在局部环境安装gulp

3、再来按照你的项目有什么文件压缩什么文件,一般在cmd通常都要压缩html、js、css和图片,或是合并。。。

4、在cmd 输入 npm install --save-dev gulp-uglify  js文件压缩

  npm install --save-dev gulp-clean-css  css文件压缩

  npm install --save-dev gulp-html-minify  html文件压缩

  npm install --save-dev gulp-imagemin  图片压缩

  npm install --save-dev gulp-autoprefixer  自动添加css前缀

  npm install --save-dev gulp-contact  合并文件

5、接下来就是代码了

  // 1、先装全局变量
  // 2、再装本地
  var gulp = require("gulp");
  // 3、压缩代码的模块,还需要本地安装 gulp-uglify
  var uglify = require("gulp-uglify");//压缩js
  var cssmin = require("gulp-clean-css");//压缩css
  var htmlmin = require("gulp-html-minify");//压缩html
  var imgmin = require("gulp-imagemin");//压缩图片
  var concat = require("gulp-concat");//合并文件
  var autoprefixer = require("gulp-autoprefixer");//添加前缀  

  //压缩JS
  gulp.task("jsmin",function(argument){
     this.src("./public/js/audio.js") //压缩js文件原件的路径
       .pipe(uglify())    //使用uglify() 方法压缩
        .pipe(gulp.dest("./dist/js"))    //文件压缩的最终目的是/dist/js文件夹里面
  })

  //合并文件
  gulp.task("jsmin",function(argument){
    this.src("./public/js/*")   //* 代表 两个或两个以上的文件
      .pipe(uglify())               //使用uglify() 方法压缩
      .pipe(concat("all.min.js"))   //使用concat方法 将两个或两个以上的文件压缩到  all.min.js 文件里面
      .pipe(gulp.dest("./dist/js"))   //文件压缩的最终目的是/dist/js文件夹里面
  })

  //压缩css
  gulp.task("cssmin",function(argument){
    this.src("./public/css/song.css")
      .pipe(autoprefixer({               //autoprefixer 方法 自动添加css前缀
      browsers:['last 2 versions'],    //浏览器的版本
        cascade:true
      }))
      .pipe(cssmin())         //使用cssmin() 方法压缩
      .pipe(gulp.dest("./dist/css"))   //文件压缩的最终目的是/dist/css文件夹里面
  })

  //压缩html
  gulp.task("htmlmin",function(argument){
    this.src("./*.html")   
      .pipe(htmlmin())
      .pipe(gulp.dest("./dist"))
  })  

  //压缩img
  gulp.task("imgmin",function(argument){
    this.src("./public/img/*")    //所有的图片
      .pipe(imgmin())          //使用imagemin() 方法压缩图片
      .pipe(gulp.dest("./dist/image"))  //文件压缩的最终目的是/dist/image文件夹里面
  }) 

  gulp.task("default",function(argument){
    gulp.run(["jsmin","cssmin","htmlmin","imgmin"]);
  })

 

posted @ 2017-03-09 20:52  shirleyYing  阅读(268)  评论(1编辑  收藏  举报