文档章节

gulp的自动化开发环境配置

小翔
 小翔
发布于 2016/05/27 18:01
字数 603
阅读 145
收藏 2

安装了 browser-sync

//这个要装浏览器插件
//npm install gulp-livereload --save-dev
//这种不用装插件|我用的这种(感觉这种安装方便点,是自动加载css,html和js的相应功能)
npm install browser-sync --save-dev
gulpfile.js要修改下:
var gulp=require('gulp');
//css
var less=require('gulp-less');
var cleanCSS = require('gulp-clean-css');//css 代码压缩
var autoprefixer = require('gulp-autoprefixer'); //css代码自动补全
//js
var babel = require('gulp-babel'); //css代码自动补全
var uglify = require('gulp-uglify');//js压缩
//tool
var sourcemaps = require('gulp-sourcemaps');//生成sourcemaps
var concat = require('gulp-concat'); //css代码自动补全
var browserSync = require('browser-sync').create();
var reload      = browserSync.reload;
//定义一个testLess任务(自定义任务名称)
gulp.task('testLess', function () {
    var gulpTest=gulp.src('src/css/**.less'); //该任务针对的文件 'src/css/xxx.less'|['src/css/xxx.less','src/css/xxx1.less']|'src/css/*.less' 都行
    if(process.env.NODE_ENV!='production'){
        gulpTest=gulpTest.pipe(sourcemaps.init());
    }
    gulpTest=gulpTest.pipe(less()) //该任务调用的模块
        .pipe(autoprefixer({ browsers: [
                'Android >= 4',
                'Chrome >= 20',
                'Firefox >= 24', // Firefox 24 is the latest ESR
                'Explorer >= 9',
                'iOS >= 6',
                'Opera >= 12',
                'Safari >= 6'
            ], cascade: true , remove:false})) //自动补全
        .pipe(cleanCSS())//{compatibility: 'ie8'} ie8|ie7|*(默认) 其它值为ie9+ 压缩css
        .pipe(concat('app.css'));
    if(process.env.NODE_ENV!='production'){
        gulpTest=gulpTest.pipe(sourcemaps.write());
    }
    gulpTest=gulpTest.pipe(gulp.dest('./dest/css')); //将会在src/css下生成index.css
});
gulp.task('testEs6', function () {
    var gulpTest= gulp.src('src/js/**.es6');
    if(process.env.NODE_ENV!='production'){
        gulpTest=gulpTest.pipe(sourcemaps.init());
    }
    gulpTest=gulpTest.pipe(babel({presets: ['es2015','stage-3']}))
        .pipe(uglify())
        .pipe(concat('app.js'));
    if(process.env.NODE_ENV!='production'){
        gulpTest=gulpTest.pipe(sourcemaps.write());
    }
    gulpTest=gulpTest.pipe(gulp.dest('./dest/js'));
});

gulp.task('testHtml', function () {
    var gulpTest=gulp.src('src/html/**.html');
    gulpTest=gulpTest.pipe(gulp.dest('./dest/html')); //将会在src/css下生成index.css
});


//watch自动编译
gulp.task('watch', function () {
    gulp.watch('./src/js/**.es6', ['testEs6']);
    gulp.watch('./src/html/**.html', ['testHtml']);
    gulp.watch('./src/css/**.less', ['testLess']);
    //各watch不能重叠如不能写成./src/**.es6,./src/**.html这种,要分离开
});
//server实时brower显示更改
gulp.task('server', function () {
    browserSync.init({
        server: {
            baseDir: "./dest"
        }
    });
    gulp.watch("./dest/**").on("change", reload);
});

//默认的任务
gulp.task('default',['watch','server']); //定义默认任务
{
  "name": "gulpTest",
  "version": "1.0.0",
  "description": "This is for study gulp project !",
  "homepage": "",
  "repository": {
    "type": "git",
    "url": "http://git.oschina.net/huhu/gulpTest"
  },
  "author": {
    "name": "yfx",
    "email": "3811970@qq.com"
  },
  "license": "ISC",
  "scripts": {
    "test": "cross-env NODE_ENV=production gulp"
  },
  "devDependencies": {
    "babel-core": "^6.9.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-stage-3": "^6.5.0",
    "browser-sync": "^2.12.9",
    "cross-env": "^1.0.7",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-babel": "^6.1.2",
    "gulp-clean-css": "^2.0.7",
    "gulp-concat": "^2.6.0",
    "gulp-less": "^3.1.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^1.5.3"
  }
}

gulpfile.js外部应该还可以通过装一个babel的插件使gulpfile.js改为es6的结构,但由于nodejs6都支持es6了(等es7就可以用gulp了),感觉意义不大了。

主要就是通过gulp自带的watch函数通过对文件的修改做监听,从而完成打包和浏览器同步。

可参考:https://git.oschina.net/huhu/gulpTest.git

© 著作权归作者所有

小翔
粉丝 12
博文 45
码字总数 21103
作品 0
江北
程序员
私信 提问
再学一次gulp自动化构建项目(含有开发环境和生产环境之分)

前言 用gulp构建官网的项目,起初用别人配置好的gulpfile来构建,后来发现有很多不人性化的操作,比如说在开发调试中,打印出console,按这个去找源文件的出处,发现代码被压缩了,找的可费劲...

Empty莫晓邪
2018/08/18
0
0
基于 Bootstrap 的快速建站 HTML5 套件 - Uix Kit

Uix Kit! 它是一个基于Bootstrap的快速建站HTML5套件,遵循W3C标准,包括手风琴、Tab切换、大型导航、单页、视差、分页、项目符号列表、文章列表、网格系统、AJAX交互、常用的多风格轮播、视...

xizon
2018/02/26
2.7K
0
H5新人福音~零配置搭建现代化的前端工程

X-BUILD一套基于Webpack(v4.21.0)快速搭建H5场景开发环境的脚手架,只需要几分钟的时间就可以运行起来。X-BUILD是针对H5开发的一套自动化构建工具,致力于提升开发效率,减小开发难度。它可以...

codexu
2018/11/20
0
0
建立Laravel工程的个人总结

建立Laravel工程的个人总结 前端配置 首先创建工程,如果未下载composer,需要安装composer,如果安装,输入如下命令: composer create-project laravel/laravel myproject 根据上面的指令,...

John_Kwok
2016/01/31
122
0
前端自动化构建工具gulp的使用介绍

gulp是基于流的自动化构建工具 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具...

jywud
2016/05/14
155
0

没有更多内容

加载失败,请刷新页面

加载更多

rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
5
0
简述TCP的流量控制与拥塞控制

1. TCP流量控制 流量控制就是让发送方的发送速率不要太快,要让接收方来的及接收。 原理是通过确认报文中窗口字段来控制发送方的发送速率,发送方的发送窗口大小不能超过接收方给出窗口大小。...

鏡花水月
今天
10
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
1K
11
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部