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

目录结构

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任务

  1. 加载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');
  2. 构建一个处理静态文件的 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);
    });
  3. 编译 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());
    });
  4. 压缩 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());
    });
  5. 处理 html 文件
    //html
    gulp.task('html', function() {
    return gulp.src("src/app/*.html")
    .pipe(plumber())
    .pipe(gulp.dest("dist/"))
    .pipe(browserSync.stream());
    });
  6. 打包发布目标文件
    // publish
    gulp.task('publish', function(){
    return gulp.src('dist/**/*')
    .pipe(plumber())
    .pipe(zip('publish.zip'))
    .pipe(gulp.dest('release'))
    });
  7. 编辑默认任务
    gulp.task('default', ['serve']);

安装必要模块

执行cnpm install安装

开始工作

  1. 运行 gulp 命令,如果没有异常 gulp 就已经开始工作了,浏览器会自动打开。
  2. 打开 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
  3. 打开编辑器在 gulps/src/app/script/javascritpt.js文件中输入下面内容
    $(function(){
    $('#main').css({
    'margin-top':($(window).height()-600)/2
    });
    })
  4. 编辑src/app/index.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 - Fedistitle>
    <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>Fedish1>                    
                    <p>Front-End development integration solutionp>
                   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,浏览器会自动打开访问首页,修改任意文件都会被捕捉到

你可能感兴趣的:(java,web)