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

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

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

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

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

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

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

• sass的编译（ gulp-ruby-sass ）
• 自动添加css前缀（ gulp-autoprefixer ）
• 压缩css（ gulp-minify-css ）(后来发现我用的是  gulp-clean-css  压缩css文件)
• js代码校验（ gulp-jshint ）
• 合并js文件（ gulp-concat ）
• 压缩js代码（ gulp-uglify ）
• 压缩html文件（gulp-html-minify）
• 压缩图片（ gulp-imagemin ）
• 重命名（ gulp-rename ）
• 自动刷新页面（ gulp-livereload ）
• 图片缓存，只有图片替换了才压缩（ gulp-cache ）
• 更改提醒（ gulp-notify ）
• 清除文件（ del ）

使用它们，就要先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"]);
　　})