使用gulp来自动化部署前端项目

来源：互联网发布：淘宝推广怎么做编辑：程序博客网时间：2024/05/18 03:48

目录结构

gulps/
├── src/app/ 开发目录
│ ├── sass/
│ │ └─ main.scss
│ ├── scripts/
│ │ └─ javascript.js
│ └── index.html
├── dist/ dist 目标文件目录，这里是编译、压缩过的文件。
└── release/ release 可以发布至服务器的文件。

使用npm生成package.json

npm install -g cnpm –registry=https://registry.npm.taobao.org 替换npm 因为网络原因不能用你懂得
使用cnpm init 初始化package.json文件
例子:
{
“name”: “gulps”,
“version”: “1.0.0”,
“description”: “first gulp example”,
“main”: “index.js”,
“keywords”: [
“gulp”,
“sass”,
“browser-sync”,
“style”,
“html”
],
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1”
},
“author”: “wxl”,
“license”: “ISC”,
“bugs”: {
“url”: “https://github.com/runjava/gulps/issues”
},
“homepage”: “https://github.com/runjava/gulps#readme“,
“repository”: {
“type”: “git”,
“url”: “git+https://github.com/runjava/gulps.git”
},
“dependencies”: {
“browser-sync”: “2.10.0”,
“browsersync-ssi”: “0.2.4”,
“gulp”: “^3.9.0”,
“gulp-concat”: “^2.6.0”,
“gulp-minify”: “0.0.5”,
“gulp-minify-css”: “^1.2.1”,
“gulp-plumber”: “^1.0.1”,
“gulp-rename”: “^1.2.2”,
“gulp-sass”: “2.1.0”,
“gulp-zip”: “^3.0.2”
}
}

安装gulp

cnpm install -g gulp 全局安装
项目中安装 cnpm install gulp
在项目跟目录下新建gulpfile.js文件
gulpfile.js :

构建gulp任务

加载gulp插件
'use strict'; var gulp = require('gulp'), browserSync = require('browser-sync').create(), SSI = require('browsersync-ssi'), concat = require('gulp-concat'), minifyCss = require('gulp-minify-css'), minify = require('gulp-minify'), plumber = require('gulp-plumber'), rename = require('gulp-rename'), sass = require('gulp-sass'), zip = require('gulp-zip');
构建一个处理静态文件的 server ，并监听工作目录，当工作目录有文件变化时立即进行相关操作并执行 browserSync.reload 重新加载页面。
gulp.task('serve', function() { browserSync.init({ server: { baseDir:["./dist"], middleware:SSI({ baseDir:'./dist', ext:'.shtml', version:'2.10.0' }) } }); gulp.watch("src/app/scss/**/*.scss", ['sass']); gulp.watch("src/app/scripts/**/*.js", ['js']); gulp.watch("src/app/**/*.html", ['html']); gulp.watch("dist/**/*.html").on("change",browserSync.reload); });
编译 sass 文件、并自动注入到浏览器
gulp.task('sass', function() { return gulp.src("src/app/scss/**/*.scss") .pipe(plumber()) .pipe(sass.sync().on('error', sass.logError)) .pipe(sass({outputStyle:"compact"})) .pipe(gulp.dest("dist/styles")) .pipe(browserSync.stream()); });
压缩 javascript 文件
// javscript files operate gulp.task('js', function(){ return gulp.src('src/app/scripts/**/*.js') .pipe(plumber()) .pipe(minify()) .pipe(gulp.dest("dist/scripts")) .pipe(browserSync.stream()); });
处理 html 文件
//html gulp.task('html', function() { return gulp.src("src/app/*.html") .pipe(plumber()) .pipe(gulp.dest("dist/")) .pipe(browserSync.stream()); });
打包发布目标文件
// publish gulp.task('publish', function(){ return gulp.src('dist/**/*') .pipe(plumber()) .pipe(zip('publish.zip')) .pipe(gulp.dest('release')) });
编辑默认任务
gulp.task('default', ['serve']);

安装必要模块

执行cnpm install安装

开始工作

运行 gulp 命令，如果没有异常 gulp 就已经开始工作了，浏览器会自动打开。
打开 gulps/src/app/scss/main.scss 输入如下内容
.fedis-main { background-image: linear-gradient(135deg, #573e81, #133259 40%, #133259); color: #FFF; padding: 80px; h1{font-size: 6em; font-family: Arial, Helvetica, sans-serif; text-align: center;font-weight: 100; } } .footer{color:#888 }
当按下 Ctrl+S 保存时，sass 任务会自动执行，执行完成后 learn-gulp/dist/styles/ 目录下会生成css文件 main.css
打开编辑器在 gulps/src/app/script/javascritpt.js文件中输入下面内容
$(function(){ $('#main').css({ 'margin-top':($(window).height()-600)/2 }); })
编辑src/app/index.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">    <title>Welcome - Fedis</title>    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.css">    <link rel="stylesheet" href="styles/main.css"></head><body>    <div class="container" id="main">        <div class="row">            <div class="col-md-12">                <div class="jumbotron text-center fedis-main">                    <h1>Fedis</h1>                                        <p>Front-End development integration solution</p>                   hello world!                </div>            </div>        </div>    </div>    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>    <script src="scripts/javascript.js"></script></body></html>

打开命令行执行`gulp`,浏览器会自动打开访问首页,修改任意文件都会被捕捉到

0 0