一. 什么是gulp ? 前端自动化构建工具 二. gulp的作用? 1. 压缩js 2. 压缩CSS 3. 合并文件 4. 压缩图片 5. 编译sass 6. 重命名文件 三. gulp 依赖的平台 ? nodeJS 四. 如何使用gulp ? 1. 全局安装gulp : npm(cnpm) install -g gulp@3 只安装一次 2. 准备项目(接下来的操作都在项目的根目录下进行) 1> 打包(package.json) : npm(cnpm) init [-y], 2> 本地安装gulp : npm(cnpm) install --save-dev gulp@3, 3> 创建gulpfile.js的配置文件 4> 安装所需的插件 : npm(cnpm) install --save-dev 插件名,
(1) 压缩js gulp-uglify (2) 重命名: gulp-rename, (3) 合并 : gulp-concat, (4) 压缩图片: gulp-imagemin 5> 配置gulpfile.js文件 //1 引入所需的模块 let gulp = require('gulp'), uglify = require('gulp-uglify'), rename = require('gulp-rename'), concat = require('gulp-concat'); //2.发布任务 gulp.task('js',()=>{ return gulp.src('./src/js/*.js') .pipe(uglify()) //压缩js //.pipe(rename({'suffix' : '.min'})) //重命名 .pipe(concat('all.min.js')) //合并js文件 .pipe(gulp.dest('./dist/js')); }) //发布监听任务 gulp.task('default',()=>{ gulp.watch('./src/js/*.js',['js']); }) 6. 运行任务: gulp 任务名, 如果任务名是default,那么只需要运行gulp五. gulp的API 1. gulp.src() 要进行处理的文件的路径 2. gulp.dest() 指定处理后的文件的出口路径 3. gulp.task() 创建和发布任务 4. gulp.watch() 监听任务(当监听的文件发生变化时,会自动调用相应的任务) pipe() : 负责连接下一步处理的方法
