gulp安装及使用
2019-08-09 21:37
435 查看
gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率。 在 Web 前端开发工作中有很多“重复工作”,比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律,并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。
1.安装
[code]//全局安装 npm install -g gulp 或 cnpm install -g gulp
2.在工程中生成package.json文件
[code]npm init
3.在工程中安装gulp
[code]npm install gulp --save-dev 或 cnpm install gulp --save-dev
4.在工程的根目录下创建gulpfile.js文件
5.gulp使用前的准备
5.1安装需要使用的各种插件(基于gulp的插件 如压缩js可以使用gulp-uglify插件,压缩css,html,images等插件)
5.2在 gulpfile.js
中编写代码
[code]// 获取 gulp var gulp = require('gulp')
require()是 node (CommonJS)中获取模块的语法。在 gulp 中你只需要理解
require()可以获取模块。
5.3获取 gulp-uglify
组件
[code]// 获取 uglify 模块(用于压缩 JS) var uglify = require('gulp-uglify')
5.4创建压缩任务
[code]// 压缩 js 文件 // 在命令行使用 gulp script 启动此任务 gulp.task('script',//任务名 function() { // 1\. 找到指定文件 gulp.src('js/index.js') // 2\. 压缩文件 .pipe(uglify()) // 3\. 另存压缩后的文件地址 .pipe(gulp.dest('dist/js')) }) 在gulp4以上,写成 // 压缩 js 文件 // 在命令行使用 gulp script 启动此任务 gulp.task('script',async //异步处理 function() { // 1\. 找到指定文件 gulp.src('js/index.js') // 2\. 压缩文件 .pipe(uglify()) // 3\. 另存压缩后的文件地址 .pipe(gulp.dest('dist/js')) })
以上为压缩js文件,其他操作步骤和上面类似。
6.进行gulp操作
[code]$ gulp 任务名
注意:gulp4以上如果需要同时压缩多个文件,除了在回调函数前面加async异步处理外,执行如下操作
[code]gulp.task("新的任务名",gulp.series("任务名1","任务名2",....,"任务名n",function(){ console.log("hello"); });
多个文件同时压缩时,可以不传任务名运行
[code]$ gulp
如果一个文件夹下有多个文件需要处理,可以进行批量操作
[code]// 压缩 js 文件 // 在命令行使用 gulp script 启动此任务 gulp.task('script',async //异步处理 function() { // 1\. 找到指定文件 gulp.src('js/*.js') //*表示js文件夹下后缀名为js的文件全部压缩 // 2\. 压缩文件 .pipe(uglify()) // 3\. 另存压缩后的文件地址 .pipe(gulp.dest('dist/js')) })
以上为js批量压缩,其他批量压缩与其类似。
相关文章推荐
- gulp项目安装最简单方法——在win10上使用镜像
- gulp安装并使用
- 使用gulp安装智图压缩图片
- git & node & gulp - 基础安装使用 - Windows
- gulp的安装教程,使用教程,和简单的自动化任务教程
- Gulp安装+使用
- Gulp的安装以及配置使用说明
- 【前端自动化】Gulp的使用(一):安装gulp
- Linux前端自动化gulp安装与使用
- 关于gulp的安装和使用的方法
- gulp安装流程、使用方法及cmd常用命令导览
- gulp的安装与使用
- Gulp安装使用教程
- gulp的安装与使用方法
- gulp的安装教程,使用教程,和简单的自动化任务教程
- gulp的安装与使用
- gulp的安装与使用
- gulp安装及使用流程
- gulp 的 安装使用
- gulp.js 的安装以及使用