gulp使用流程

2018-04-19  本文已影响0人  who_rong

在安装 Webpack 前,你本地环境需要支持node.js

mac系统在终端上安装东西的时候 一般加上sudo   打开权限

gulp 是基于 node 实现 Web 前端 动化开发的 具,  它能够极 的 提 开发效率。gulp 还可以做很多事

 1. 压缩CSS    2. 压缩图     3. 编译Sass/LESS    4. 编译CoffeeScript    5. markdown 转换为 html 6.压缩合并js


创建文件夹gulp  里面创建三个文件:app文件夹(放自己写的内容 未压缩的);  build文件夹(放压缩后的文件);  gulpfile.js文件(配置文件,文件名不能修改)

1.安装 gulp:  sudo cnpm install gulp

2.建立gulpfile.js配置文件,引入gulp模块

3.获取到压缩js的模块uglify:npm install gulp-uglify --save ;引入gulp-uglify模块

4.创建压缩任务:gulp.task(name, fn) - 定义任务,第一个参数是任务名,第二个参数是任务 内容。

    gulp.src(path) - 选择文件,传入参数是文件路径。

    gulp.dest(path) - 输出文件

    gulp.pipe() - 管道,你可以暂时将 pipe 理解为将操作加入执行队列

5.监听文件修改:gulp.task('auto', function () {

        // 监听文件修改,当文件被修改则执行 script 任务 gulp.watch('js/*.js', ['script'])

    })

6.css压缩:  安装gulp-clean-css来压缩css

上一篇 下一篇

猜你喜欢

热点阅读