使用gulp构建一个项目
gulp是前端开发过程中自动构建项目的工具,相同作用的还有grunt。构建工具依靠插件能够自动监测文件变化以及完成js/sass/less/html/image/css/coffee等文件的语法检查、合并、重命名、压缩、格式化、浏览器自动刷新、部署文件等功能。
gulp是基于Nodejs的自动运行器,他借鉴了Unix操作系统的管道(pipe)思想,前一级的输出是后一级的输入。下面是具体流程:
1、安装nodejs
nodejs下载地址:https://nodejs.org/
nodejs自带npm模块管理器,安装完成之后打开dos命令窗口输入 node -v就能查看nodejs是否安装成成功
常用的npm命令
npm init——初始化
npm install——安装插件
npm install plugname -g——全局安装
npm install plugname@2.3.0——安装具体某个版本的插件
npm update——更新插件
npm uninstall——卸载插件
常用dos命令
cd 进入某个目录
cd.. 返回上一级
dir 查看列表
cls 清除屏幕
del name 删除文件
md name 新建目录名
rd name 删除目录名
copy con name.txt 新建文件
del name.txt 删除文件
2、全局安装gulp
[plain] view plain copy
npm install gulp -g
3、创建本地项目
上面是准备工作,安装完全局gulp之后,cd到项目文件夹安装本地gulp,安装之前要先初始化
[plain] view plain copy
npm init
初始化的时候要求你输入一些值,不输的直接回车即可,点击y之后在根目录自动创建了一个package.json文件,这个文件用来存放即将安装的插件name和version,这个文件有什么用呢?当我们把项目拷贝给别人的时候不需要拷贝插件,只需要把项目文件、package.json和gulp.file.js拷贝过去就可以,接收人cd到项目文件目录直接输入npm install即可安装上我们拷贝前安装的各种插件。
4、设计项目目录索引结构
[plain] view plain copy
└── src/
├── less/ *.less 文件
├── sass/ *.scss *.sass 文件
├── css/ *.css 文件
├── js/ *.js 文件
├── fonts/ 字体文件
└── images/ 图片
└── dist/
5、安装各种插件
[plain] view plain copy
npm install gulp gulp-imagemin gulp-minify-css gulp-uglify gulp-util gulp-watch-path stream-combiner2 --save-dev
--save-dev这个命令是将安装的插件信息写入package.json文件内的“devDependencies”属性内,插件全部安装完之后package.json的变化为:
[plain] view plain copy
"devDependencies": {
"gulp": "^3.9.1",
"gulp-imagemin": "^2.3.0",
"gulp-minify-css": "^1.2.4",
"gulp-uglify": "^1.5.3",
"gulp-util": "^3.0.7",
"gulp-watch-path": "^0.1.0",
"stream-combiner2": "^1.1.1"
}
插件安装完毕之后会自动创建一个node_modules文件夹,所有插件的依赖都存在这里面。
gulp——本地gulp
gulp-imagemin——图片压缩
gulp-minify-css ——css压缩
gulp-uglify ——js压缩
gulp-util ——控制台代码着色
gulp-watch-path ——文件很多时编辑那个哪个压缩,不会全部压缩(获取改变的文件的src和dest路径)
stream-combiner2——有些 gulp 任务编译出错会终止 gulp.watch,使用 gulp-watch-path 配合stream-combiner2 可避免这种情况
6、gulp如何使用
控制台输入gulp的时候首先找寻gulpfile.js文件,在找寻default任务,所以我们应该手动新建一个名为gulpfile.js的js文件,将任务写在里面。具体文件目录为:
gulp一共五中方法:
gulp.task()——新建任务
gulp.src()——获取文件源地址
gulp.dest()——文件输出地址
gulp.run()——运行任务
gulp.watch()——监听文件修改
7、编写gulpfile.js文件
(1)引入插件变量
[plain] view plain copy
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
minifycss = require('gulp-minify-css'),
imgmin = require('gulp-imagemin'),
gutil = require('gulp-util'),
watchPath = require('gulp-watch-path'),
combiner = require('stream-combiner2');
(2)新建代码着色与显示错误日志方法,这个方法用到了gulp-util和stream-combiner2插件
[plain] view plain copy
var handleError=function(err){
console.log('\n');
gutil.log('fileName: '+gutil.colors.red(err.fileName));
gutil.log('lineNumber: '+gutil.colors.red(err.lineNumber));
gutil.log('message: ' + err.message);
gutil.log('plugin: ' + gutil.colors.yellow(err.plugin));
};
(3)新建js批量压缩任务
[plain] view plain copy
gulp.task('script',function(){//script时自定义的
//将文件的源路径和发布路径赋值给相应变量
var srcJsPath='js/*.js';
var destJsPath='dist/js/';
var combined = combiner.obj([
gulp.src(srcJsPath),//获取文件源地址
uglify(),//执行压缩
gulp.dest(destJsPath)//将压缩的文件发布到新路径
]);
combined.on('error', handleError);//打印错误日志
});
这种写法需要css目录下有很多css文件,只要改变了一个点击保存的时候gulp会把所有css文件都会压缩一遍,为了提高性能我们可以利用gulp-watch-path插件只压缩/发布修改的文件
[plain] view plain copy
gulp.task('watchjs',function(){
gulp.watch('js/*.js',function(event){
var paths=watchPath(event,'js/','dist/js/');
//打印修改类型和路径
gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath);
gutil.log('Dist: ' + paths.distPath);
//获取错误信息,继续执行代码
var combined = combiner.obj([
gulp.src(paths.srcPath),
uglify(),
gulp.dest(paths.distDir)
]);
combined.on('error', handleError);
});
});
(4)编写default任务和监听任务
新建批量任务还是监听修改任务根据项目中实际需要去写,等我们写好很多任务之后就需要写入default中,default写好之后只需要在dos窗口写入gulp就可以自动执行任务
[plain] view plain copy
gulp.task('default',function(){
//默认执行的方法,引号内的内容对应上面task写的内容
gulp.run('watchjs','css','images');
//监控js
gulp.watch('js/*.js',['watchjs']);
//监控css
gulp.watch('css/*.css',['css']);
//监控img
gulp.watch('images/*.*',['images']);
});
如果不想执行默认任务只执行js单文件压缩任务只需要输入 gulp watchjs即可。控制台输入为下图:
此时,gulp处于监听状态,如果要取消需要按ctrl+c 回车即可。
---------------------
作者:zhangwenwu的前端小站
来源:CSDN
原文:https://blog.csdn.net/zhangwenwu2/article/details/53114204
版权声明:本文为博主原创文章,转载请附上博文链接!
使用gulp构建一个项目的更多相关文章
- 使用 gulp 构建一个项目
本章将介绍 gulp-watch-path stream-combiner2 gulp-sourcemaps gulp-autoprefixer 您还可以直接学习以下模块: 安装 Node 和 gul ...
- 2016-7-15(1)使用gulp构建一个项目
gulp是前端开发过程中自动构建项目的工具,相同作用的还有grunt.构建工具依 靠插件能够自动监测文件变化以及完成js/sass/less/html/image/css/coffee等文件的语法检查 ...
- 续Gulp使用入门-综合运用>使用Gulp构建一个项目
这是我的文件目录结构图 下面是我gulpfile.js的配置 'use strict' var gulp=require('gulp'); var gutil=require('gulp-util' ...
- gulp构建自动化项目
'use strict'; var gulp = require('gulp'), browserSync = require('browser-sync').create(), SSI = requ ...
- Vue+webpack构建一个项目
1.安装CLI命令的工具 推荐用淘宝的镜像 npm install -g @vue/cli @vue/cli-init 2.使用命令构建一个名为myapp的项目 vue init webpack m ...
- 《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6和Sass应用
8.3.1 安装和配置 运行Gulp需要Node.js环境,请参看第二章内容搭建Node.js环境.使用NPM全局安装Gulp,命令如下: npm install gulp-cli –g 然后,在项目 ...
- grunt构建一个项目
准备工作:grunt基于node环境运行,所有先安装node.js 1.安装grunt,通过node的npm的包管理工具 >npm install grunt --save-dev 2.npm ...
- Django 构建一个项目
一.创建django程序 终端命令:django-admin startproject fahaicmd IDE创建Django程序时,本质上都是自动执行上述命令 其他常用命令: python man ...
- python构建一个项目
二.实验步骤 2.1 实验准备 我们的实验项目名为 factorial. $ mkdir factorial $ cd factorial/ 2.2 主代码 我们给将要创建的 Python 模块取名为 ...
随机推荐
- configure: error: Cannot find php-config. Please use --with-php-config=PATH
本文章给大家介绍configure: error: Cannot find php-config. Please use --with-php-config=PATH错误解决办法. configure ...
- luo3372线段树模板的分块做法
题目大意 请你维护一个有n个元素的整数序列,要求支持区间查询&区间修改 对于100%的数据,\(1<=n<=10^5\) 分析 正常做法是线段树维护区间修改.区间查询,今天我要讲的 ...
- 关于Android文件Apk下载的那点事
1.Android文件Apk下载变ZIP压缩包解决方案 如果你的下载服务器为Nginx服务器,那么,在Nginx安装目录下的conf/mime.types文件的对应位置,加上以下一行语句,指定APK文 ...
- mobile_缩放
document.documentElement.clientWidth 不包含滚动条 window.innerWidth ...
- Nestjs 微服务
文档 工作示例 安装: $ npm i --save @nestjs/microservices main.ts import { NestFactory } from '@nestjs/core'; ...
- 【C++ 实验六 继承与派生】
实验内容 1. 某计算机硬件系统,为了实现特定的功能,在某个子模块设计了 ABC 三款芯片用于 数字计算.各个芯片的计算功能如下: A 芯片:计算两位整数的加法(m+n).计算两位整数的减法(m-n) ...
- 安卓动态分析工具【Android】3D布局分析工具
https://blog.csdn.net/fancylovejava/article/details/45787729 https://blog.csdn.net/dunqiangjiaodemog ...
- jquery全选 不全选
<input type="checkbox" id="check">点击 <input type="checkbox" c ...
- Codeforces 785 - A/B/C/D/E - (Undone)
链接:https://codeforces.com/contest/785 A - Anton and Polyhedrons #include<bits/stdc++.h> using ...
- centos7 部署vnc
不做过多介绍了,下面直接记录下centos7系统下安装配置vncserver的操作记录 0)更改为启动桌面或命令行模式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 1 ...