gulp 入门

最新推荐文章于 2024-11-03 15:30:08 发布

前端漫谈

最新推荐文章于 2024-11-03 15:30:08 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端脚本文章标签： gulp

本文链接：https://blog.youkuaiyun.com/hcz804933522/article/details/52204109

前端脚本专栏收录该内容

60 篇文章

订阅专栏

本文介绍了gulp的基础使用方法，包括安装步骤、配置流程及常见任务配置。从环境搭建到具体实践，帮助初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

gulp学习资源：

gulp官方网址：http://gulpjs.com

gulp插件地址：http://gulpjs.com/plugins

gulp 官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.md

gulp 中文API：http://www.ydcss.com/archives/424

2.流程：

安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

3.npm 安装介绍

3.1、说明：npm（node package manager）nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）；

3.2、使用npm安装插件：命令提示符执行npm install <name> [-g] [--save-dev]；

3.2.1、<name>：node插件名称。例：npm install gulp-less --save-dev

3.2.2、-g：全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm，并且写入系统环境变量；非全局安装：将会安装在当前定位目录；全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过require()调用；

3.2.3、--save：将保存配置信息至package.json（package.json是nodejs项目配置文件）；

3.2.4、-dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；一般保存在dependencies的像这些express/ejs/body-parser等等。

3.2.5、为什么要保存至package.json？因为node插件包相对来说非常庞大，所以不加入版本管理，将配置信息写入package.json并将其加入版本管理，其他开发者对应下载即可（命令提示符执行npm install，则会根据package.json下载所有需要的包，npm install --production只下载dependencies节点的包）。

3.3、使用npm卸载插件：npm uninstall <name> [-g] [--save-dev] PS：不要直接删除本地插件包

3.3.1、删除全部插件：npm uninstall gulp-less gulp-uglify gulp-concat ……???太麻烦

3.3.2、借助rimraf：npm install rimraf -g 用法：rimraf node_modules

3.4、使用npm更新插件：npm update <name> [-g] [--save-dev]

3.4.1、更新全部插件：npm update [--save-dev]

3.5、查看npm帮助：npm help

3.6、当前目录已安装插件：npm list

4、选装cnpm

4.1、说明：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。32个！来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步。”；

4.2、官方网址：http://npm.taobao.org；

4.3、安装：命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org；注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；

注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm（以下操作将以cnpm代替npm）。

cnpm init创建package.json ,配置项目相关信息。json中不可出现注释内容，推荐使用命令行修改。

5、全局安装gulp

cnpm/npm install -g gulp(不好的就是，全局安装了，本地还要在安装一下。不如grunt。)

6.项目中安装gulp插件

gulp-less ，使用过程和grunt类似，但是可能会带来繁琐，配置没有grunt灵活。

6.gulpfile.js 配置文件

<span style="font-family:Microsoft YaHei;font-size:14px;">var gulp = require('gulp'),
	gulpSequence=require('gulp-sequence'),
    htmlhint = require("gulp-htmlhint"),
    htmlmin = require('gulp-htmlmin')

    // clean = require('clean')

;


// 注册任务 4.0 才可以
// gulp.task('default', gulp.series('htmlhintTask','htmlminTask'));

gulp.task('htmlhintTask', function() {
    gulp.src("./src/main/webapp/static/html/dev/**/*.html")
        .pipe(htmlhint())
        .pipe(htmlhint.failReporter());
});

gulp.task('htmlminTask', function() {
    return gulp.src('./src/main/webapp/static/html/dev/**/*.html')
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('./src/main/webapp/static/html/min'));
});

//() 串行  [] 并行
gulp.task('sequence-1',gulpSequence('htmlhintTask','htmlminTask'));



gulp.task('default', gulpSequence('sequence-1'));


// gulp.task('clean', function() {
//     gulp.src()
//         .pipe()
// });
</span>