/ 这里是废话, 哈哈哈 /
1. 安装 nodejs
2. 打开 cmd 命令窗,
3. 进入到 project 的根目录下
4. 手动在这个根目录下创建 gulpfile.js 文件 (内容 如下)
5. 安装 gulp,
- npm install gulp --save-dev // 局部安装
- npm install gulp-sass --save-dev // 安装 sass
- gulp sass // 运行 sass
- / 这里是废话, 哈哈哈 /
项目目录结构 ####
project(项目名称)
|-.git 通过 git 管理项目会生成这个文件夹
|-node_modules 组件目录
|-dist 发布环境
|-CSS 样式文件 (style.css style.min.css)
|-images 图片文件 (压缩图片)
|-js js 文件 (main.js main.min.js)
|-index.html 静态文件 (压缩 html)
|-src 生产环境
|-sass sass 文件
|-images 图片文件
|-js js 文件
|-index.html 静态文件
|-.jshintrc jshint 配置文件
|-gulpfile.js gulp 任务文件
gulp 基础语法
gulp 通过 gulpfile 文件来完成相关任务, 因此项目中必须包含 gulpfile.js
gulp 有五个方法: src,dest,task,run,watch
src 和 dest: 指定源文件和处理后文件的路径
watch: 用来监听文件的变化
task: 指定任务
run: 执行任务
// 引入 gulp
html 代码
- var gulp = require('gulp');
- var sass = require('gulp-sass');
- var connect =require('gulp-connect');
- var concat = require('gulp-concat');
- var uglify = require('gulp-uglify');
- var rename = require('gulp-rename');
- var minifyCss = require('gulp-minify-css');
- var imagemin = require('gulp-imagemin');
- gulp.task('scripts',function(){
- return gulp.src(['javascript/jquery.js','javascript/moder.js'])
- .pipe(concat('vendor.js'))
- .pipe(gulp.dest('dist/js'))
- .pipe(uglify())
- .pipe(rename('vendor.min.js'))
- .pipe(gulp.dest('dist/js'))
- });
- gulp.task('server',function(){
- connect.server({
- root:'dist', // 值是 服务器的根目录
- livereload: true
- });
- });
- gulp.task('copy-index', function() {
- return gulp.src('index.html')
- .pipe(gulp.dest('./dist'))
- .pipe(connect.reload()); //index 文件发生变化的时候刷新 server, 即刷新浏览器
- });
- //gulp.task('images',function(){
- // return gulp.src('images/*.{png,jpg}').pipe(gulp.dest('dist/images'));
- //});
- gulp.task('images',function(){
- return gulp.src('images/**/*')
- .pipe(imagemin())
- .pipe(gulp.dest('dist/images'));
- })
- gulp.task('data',function(){
- return gulp.src(['xml/*.xml','json/*.json','!json/secret-*.json'])
- .pipe(gulp.dest('dist/data'));
- })
- gulp.task('build',['copy-index','images','data'],function(){
- console.log('编译成功!')
- })
- gulp.task('watch',function(){
- gulp.watch('index.html',['copy-index']); // 监视 index.html, 如果发生变化时, 执行后面的文件方法
- gulp.watch('images/**/*.{jpg,png}',['images']);
- gulp.watch(['xml/*.xml','json/*.json','!json/secret-*.json'],['data'])
- })
- gulp.task('sass',function(){
- return gulp.src('stylesheets/**/*.scss')
- .pipe(sass())
- .pipe(minifyCss())
- .pipe(gulp.dest('dist/css'));
- })
- gulp.task('default',['server','watch']);
来源: http://www.qdfuns.com/article/16270/1ae3f0cd6d17b73f3818b1c7403861c2.html