天天看点
返回

前段自动化工具gulp安装、使用和调试

一gulp安装

gulp 是基于 Nodejs 的自动任务运行器，

       能自动化地完成文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，       并监听文件在改动后重复指定的这些步骤。

创建目录结构   

建立如下目录结构，gulp 作为我们的项目根目录。

gulp/

├── app/

│   ├── css/

│   │  

│   ├── js/

│   │   └─ my.js

│   └──

└── www/

1. 全局安装gulp：

sudo npm install -g gulp

2.查看版本

gulp –v

3.在当前项目目录作为依赖安装，若项目里面没有node_modules,则需要创建一个

npm install gulp --save-dev

4. 在项目根目录下创建一个名为 gulpfile.js 的文件：

var gulp = require('gulp');
gulp.task('default', function() {
  console.log(‘安装成功’);
});

5.在当前目录下运行

gulp

输出”安装成功”

6.分别安装以下插件

less的编译（gulp-less）

自动添加css前缀（gulp-autoprefixer）

压缩css（gulp-minify-css）

压缩js代码（gulp-uglify）

开启服务器(gulp-connect)

合并JS (gulp-concat)

打开浏览器 (gulp-open)

压缩图片(gulp-imagemin)

sudo npm install gulp-less gulp-autoprefixer gulp-minify-css gulp-uglify gulp-connect gulp-concat gulp-open gulp-imagemin

7.这里会提示缺少packsge.json文件，这个文件使用于保存gulp插件信息的，运行

npm init

输入信息一路回车，在当前文件夹下生成package.json文件

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp-autoprefixer": "^3.1.1",
    "gulp-concat": "^2.6.1",
    "gulp": "^3.9.1",
    "gulp-imagemin": "^3.1.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-less": "^3.3.0",
    "gulp-open": "^2.0.0",
    "gulp-uglify": "^2.0.0",
    "gulp-connect": "^5.0.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

二gulp使用

gulp主要四个API：task，watch，src，和 dest

task：这个API用来创建任务，在命令行下可以输入 gulp test 来执行test的任务。gulp.task

watch：这个API用来监听任务。gulp.watch

src：这个API设置需要处理的文件的路径，可以是多个文件以数组的形式.scss，也可以是正则表达式*.scss。

dest：这个API设置生成文件的路径，一个任务可以有多个生成路径，一个可以输出未压缩的版本，另一个可以输出压缩后的版本。

1.创建项目

在app中新建一个Index.html文件，写上测试内容，并导入js/main.js文件，这个文件用于将不同js合并，引入css/main.css文件，该文件将由app中的less和css合并完成

<script type="text/javascript" src="js/main.js"></script> 
<body>
	<div>
		测试:
		<p>测试1</p>
		<p>测试2</p>
	</div>
</body>
<script src="js/main.js"></script>

在js文件夹中新建两个js文件用于测试a.js和b.js：

(function () {
   var a = "a.js文件";
    console.log(a);
})()
           
(function () {
   var a = "输出b";
    console.log(a);
})()

在css文件夹新建两个css文件用于测试css1.less和css2.css

@color:blue;
div{
	color: @color;
	p{
		color: :red;
	}
}
           
div{
	background: pink;
}
p{
	background: gray;
}

2.配置gulpfile

//引入各个模块
var gulp = require("gulp");
var less = require("gulp-less");//less编译
var autoprefixer = require("gulp-autoprefixer");//自动添加css前缀
var minify = require("gulp-minify-css");//压缩css
var uglify = require("gulp-uglify");//压缩js
var connect = require("gulp-connect");//开启服务器
var concat = require("gulp-concat");//合并js
var open = require("gulp-open");//打开浏览器
//创建一个任务用于引入html文件
gulp.task("html",function () {
    gulp.src("app/*.html")//读取位置
        .pipe(gulp.dest("www"))//写入位置
        .pipe(connect.reload())//自动刷新
})
//创建任务用于将less转化为css任务
gulp.task("style",function () {
    gulp.src(["app/css/*.less","app/css/*.css"])
        .pipe(less())//自动编译Less文件
        .pipe(autoprefixer())//自动添加前缀
        .pipe(concat("main.css"))//合并css为main.css
        .pipe(minify())//压缩css
        .pipe(gulp.dest("www/css"))//编译后写入的位置
        .pipe(connect.reload())
})
//创建js压缩合并成main.js任务
gulp.task("js",function () {
    gulp.src("app/js/*.js")
        .pipe(concat("main.js"))//合并js为main.js
        .pipe(uglify().on('error', function (e) {
   console.log(e)//报错原因分析
 }))//压缩js
        .pipe(gulp.dest("www/js"))
        .pipe(connect.reload())
})
//创建connect开启服务器任务,端口为8080
gulp.task("connect",function () {
    connect.server({
        root:"www",
        livereload:true,
        port:8080
    })
})
//创建自动打开浏览器任务
gulp.task("open",function () {
    gulp.src("")
    .pipe(open({uri:"http://localhost:8080/"}).on('error', function (e) {
   console.log(e)//报错原因分析
 }))
})
//创建watch监听任务
gulp.task("watch",function () {
    gulp.watch(["app/*.html"],["html"]);
    gulp.watch(["app/css/*.less"],["style"])
    gulp.watch(["app/js/*.js"],["js"])
})

//执行以上创建的任务
gulp.task("default",["open","connect","watch","html","style","js"]);

3.在当前目录下运行

gulp

输出

0001:gulp lan$ gulp
[21:21:43] Using gulpfile ~/Desktop/gulp/gulpfile.js
[21:21:43] Starting 'open'...
[21:21:43] Finished 'open' after 7.9 ms
[21:21:43] Starting 'connect'...
[21:21:43] Finished 'connect' after 9.77 ms
[21:21:43] Starting 'watch'...
[21:21:43] Finished 'watch' after 12 ms
[21:21:43] Starting 'html'...
[21:21:43] Finished 'html' after 3.48 ms
[21:21:43] Starting 'style'...
[21:21:43] Finished 'style' after 11 ms
[21:21:43] Starting 'js'...
[21:21:43] Finished 'js' after 982 μs
[21:21:43] Starting 'default'...
[21:21:43] Finished 'default' after 29 μs
[21:21:43] Server started http://localhost:8080
[21:21:43] LiveReload started on port 35729
[21:21:43] Opening http://localhost:8080/ using the default OS app
[21:26:56] Starting 'html'...
[21:26:56] Finished 'html' after 1.78 ms

这是浏览器自动打开http://loclahost:8080，显示

前段自动化工具gulp安装、使用和调试

控制台输出

这是a.js

这是b.js

在www文件夹中gulp成功构建在www中构建应用程序，将app中的css和less文件合并成了main.js文件并进行了压缩，将app中的js文件合并成了main.js并压缩。

三gulp调试

在运行出现两个问题，第一个是

GulpUglifyError: unable to minify JavaScript

无法压缩js文件

于是在在压缩js文件命令添加命令输出报错原因，查明是a.js里面的语法错误

.pipe(uglify().on('error', function (e) {
   console.log(e)//报错原因分析

第二个报错是：

Error: listen EADDRINUSE :::8080

监听8080端口失败，怀疑8080端口可能被占用，运行

sudo lsof -i:8080

查看端口占用情况，输出

COMMAND   PID USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
node    10747  lan   14u  IPv6 0xb6fcf1ddb05e29e1      0t0  TCP *:http-alt (LISTEN)
node    10747  lan   16u  IPv6 0xb6fcf1ddb9344ae1      0t0  TCP localhost:http-alt

端口果然被占用，就执行以下命令杀掉该进程

sudo kill -9 10747

再次查询8080占用情况输出

[1]+  Killed: 9               gulp

8080端口占用进程已被关闭，再次运行gulp，运行成功，浏览器显示相应的页面，并且在控制台输出了：

这是a.js
这是b.js

参考：gulp中文网http://www.gulpjs.com.cn/

gulp gulp报错 gulp教程 gulp安装
上一篇: 从零开发一套完整的react项目开发环境
下一篇: Gulp的使用gulp

继续阅读