前端自动化工具 -- 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"]);
})
