gulp的使用

gulp

　　--gulp

　　　　- 官网 http://www.gulpjs.com

　　　　中文网 http://www.gulpjs.com.cn

　　　　-前端自动化构建工具

　　　　-js: function(){//},代码压缩,混淆 : var name = 123,var x = 123

　　　　-css,

　　　　-合并: 1个js 1kb ,有10个js.

 

　　--5个核心方法

　　　　- gulp.task('任务名',function(){}) // 创建任务。

　　　　- gulp.src('./*.css') //指定想要处理的文件

　　　　- gulp.dest() // 指定最终处理后的文件的存放路径

　　　　- gulp.watch() // 自动的监视文件的变化，然后执行相应任务。

　　　　- gulp.run('任务名')， //直接执行相应的任务。

 

　　--安装 gulp

　　　　通过npm安装:'npm install gulp-cli -g'

　　　　这些都要基于 gulp 才能使用 先引入gulp

 

　　-- gulp使用

　　　　-1. 在当前项目中也要安装gulp: ' npm install gulp --save'

　　　　-2. 还需要在当前项目中新建一个文件: gulpfile.js

　　　　在gulpfile.js中操作
　　　　　　//1. 引入gulp

　　　　　　var gulp = require('gulp');

　　　　

　　　　　　// 2.创建任务

　　　　　　// 第一个参数: 任务名

　　　　　　// 第二个参数: 回调函数,当我们执行任务时就会执行这个函数
　　　　　　gulp.task('test', function(){
　　　　　　　　console.log(123)
　　　　　　})

　　　　-3. 执行任务: ' gulp 任务名'
　　　　　　+ 示例: 'gulp test'

　　-- gulp匹配文件及处理文件输出路径
　　　　//引入 gulp
　　　　var gulp = require ('gulp')

　　　　//处理app.js 文件
　　　　gulp.task('script',function(){
　　　　//1.要匹配处理的文件
　　　　//指定文件:参数是匹配的规则
　　　　gulp.src('./app.js')
　　　　//pipe管道 dest方法参数,指定输出文件的路径
　　　　.pipe(gulp.dest('./dist'))
　　　　})

　　　　就将app.js文件在dist文件夹中生成.

　　

　　-- gulp对js文件进行压缩操作(一个文件)
　　　　- ' npm install gulp-uglify --save '

　　　　//1.引入对js进行压缩的包
　　　　var uglify = require ('gulp-uglify')

　　　　//处理app.js 文件
　　　　gulp.task('script',function(){
　　　　//1.要匹配处理的文件
　　　　gulp.src('./app.js')
　　　　//2.直接调用
　　　　.pipe(uglify())
　　　　//dest方法参数,指定输出文件的路径
　　　　.pipe(gulp.dest('./dist'))
　　　　})

　　命令行输入 gulp script 之后 就可以看到 dist 文件夹内 app.js的压缩.

　　-- gulp对js文件进行合并和压缩操作(多个js)
　　　　- ' npm install gulp-concat --save '

　　　　//将app.js 和 sign.js 合并压缩到index.js

　　　　//1.引入对js进行合并操作的包
　　　　var concat = require ('gulp-concat')
　　　　//引入对js进行压缩的包
　　　　var uglify = require ('gulp-uglify')

　　　　//新建一个任务，对js进行处理
　　　　gulp.task('script',function(){

　　　　//2.要匹配处理的文件
　　　　//参数也可以是数组,数组中的元素就是匹配的规则
　　　　gulp.src(['./app.js','./sign.js'])

　　　　// 合并 concat 的参数是合并之后的文件名字
　　　　.pipe(concat('index.js'))

　　　　//压缩
　　　　.pipe(uglify())
　　　　//dest方法参数,指定输出文件的路径
　　　　.pipe(gulp.dest('./dist'))
　　　　})

　　命令行输入 gulp script 之后 就可以看到 dist 文件夹内 app.js的压缩.

　　-- gulp对css文件进行合并压缩
　　　　- ' npm install gulp-cssnano --save '

　　　　//将app.css 和 style.css 合并压缩

　　　　// 1.引入对css进行压缩的包
　　　　var cssnano = require('gulp-cssnano')

　　　　// 新建一个任务，对css进行处理
　　　　gulp.task('style', function(){
　　　　// 对项目中的将app.css 和 style.css 合并压缩
　　　　// 1.匹配到要处理的文件
　　　　gulp.src(['./*.css'])
　　　　// 2.合并文件
　　　　.pipe(concat('index.css'))
　　　　// 3.压缩操作
　　　　.pipe(cssnano())
　　　　// 4.输出到指定目录
　　　　.pipe(gulp.dest('./dist'))
　　　　})

　　　　命令行输入 gulp style 之后 就可以看到 css 的压缩

　　-- gulp对html文件进行压缩
　　　　- ' npm install gulp-htmlmin --save '

　　　　// 引入对html进行压缩的包
　　　　var htmlmin = require('gulp-htmlmin')

　　　　// 新建一个任务，对html进行压缩
　　　　gulp.task('html', function(){
　　　　// 1.匹配到要处理的文件
　　　　gulp.src(['./index.html'])
　　　　// 2.压缩操作
　　　　.pipe(htmlmin({collapseWhitespace:true}))
　　　　// 3.指定输出目录
　　　　.pipe(gulp.dest('./dist'))
　　　　})

　　命令行输入 gulp html 之后 就可以看到 html 的压缩

 

　　-- gulp.wathc监视文件变化, 然后执行相应的任务

　　　　// gulp.watch 监视文件变化，执行相应任务
　　　　gulp.task('mywatch', function(){
　　　　// 执行指定的任务 参数是任务名
　　　　gulp.run('script')
　　　　// 1.监视js文件的变化，然后执行script任务
　　　　// 第一个参数：要监视的文件的规则
　　　　// 第二个参数：是要执行的任务
　　　　gulp.watch(['./app.js','sign.js'],['script'])
　　　　})