目录结构
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>