码迷,mamicode.com
首页 > 其他好文 > 详细

GULP

时间:2020-05-02 16:42:44      阅读:67      评论:0      收藏:0      [点我收藏+]

标签:全局   自动完成   sas   src   常用   目的   pre   项目目录   下载   

1.gulp介绍( http://www.gulpjs.com.cn/ )

gulp 是前端开发过程中对代码进行构建的工具, 是自动化项目的构建利器; 她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;大大提高我们的工作效率。

gulp安装

npm install -g gulp 安装全局的gulp

项目初始化 npm init

npm install --save-dev gulp (新建目录---安装到项目目录下)项目依赖的环境

gulp插件安装(编译/压缩/合并/即时刷新等)

gulp-concat:合并js

gulp-watch:监听任务

gulp-uglify:压缩js

gulp-rename:重命名

gulp-imagemin:图片压缩

gulp-sass : sass编译插件

gulp-minify-html/gulp-minify-css:压缩html和css

2.package.json文件----npm init配置文件package.json

注意:npm init 时,用户需回答一些问题,然后在当前目录生成一个基本的package.json文件。package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、 版本、许可证等元数据)。

npm install命令根据package.json配置文件,自动下载所需的模块,就是配置项目所需的运行和开发环境。

devDependencies 里面的插件只用于开发环境 --save-dev 或者 -D

dependencies 是需要发布到生产环境的,且生产环境是真实的环境。 --save 或者 -S

package.json文件的解释

技术图片

3.gulp下面常用的方法

gulp.task : 执行gulp任务

gulp.src : 引入文件的目录

gulp.dest : 输出文件目录设置

gulp.run : 执行

pipe : 管道流

gulp.series(要执行的任务的名字,需要执行的函数):用于串行(顺序)执行
gulp.parallel(要执行的任务的名字,需要执行的函数):用于并行执行

4.应用

ES6编码翻译转化为ES5

三个插件:gulp-babel@7 babel-core babel-preset-es2015

5.综合应用

掌握gulp工具的使用;

掌握gulp-babel的使用;

Gulp官方插件网站找寻插件

https://gulpjs.com/plugins/ gulp插件

https://www.npmjs.com/ npm官网

GULP

标签:全局   自动完成   sas   src   常用   目的   pre   项目目录   下载   

原文地址:https://www.cnblogs.com/zlf1914/p/12818325.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!