构建gulp项目
express是node.js中的构建工具,如果需要使用express构建,首先需要安装express。
构建一个项目:
|-- app
| |-- css
| |-- js
| | `-- class
| | |-- index.js
| | `-- test.js
| `-- views
| |-- error.ejs
| `-- index.ejs
|-- server
|-- tasks
在构建完该目录后,在根目录上使用npm init -y,构建package.json文件,sudo cnpm install -g express-generator命令安装express(新版express存在在express-generator包中)然后进入server目录,通过express -e . 命令构建脚手架,其中 -e表示构建一级模板引擎
然后执行 cd . && npm install
回到构建目录:
cd ../tasks/
mkdir util
touch util/args.js
回到根目录
touch .babelrc(使用babel时使用)
touch gulpfile.babel.js (接下来使用ES6语法,所以需要创建gulpfile.babel.js文件)
进入args.js文件,引入一个包
import yargs from 'yargs'; const args = yargs .option('production',{
boolean:true,
default:false,
describe:'min all scripts'
}) .option('watch',{
boolean:true,
default:false,
describe:'watch all files'
}) .option('verbose',{
boolean:true,
default:false,
describe:'log'
}) .option('sourcemaps',{
describe:'force the creation of sroucemaps'
}) .option('port',{
string:true,
default:8080,
describe:'server port'
}) .argv export default args;
touch tasks/scripts.js
import gulp from 'gulp';
import gulpif from 'gulp-if';
import concat from 'gulp-concat';
import webpack from 'webpack';
import gulpWebpack from 'webpack-stream';
import named from 'vinyl-named';
import livereload from 'gulp-livereload';
import plumber from 'gulp-plumber';
import rename from 'gulp-rename';
import uglify from 'gulp-uglify';
import {log,colors} from 'gulp-util';
import args from './util/args';
使用
cnpm install gulp gulp-if gulp-concat webpack webpack-stream gulp-plumber gulp-rename gulp-uglify gulp-util gulp-livereload vinyl-named yargs --save-dev
等安装完毕后,重新进入scripts.js文件,编写:
import gulp from 'gulp';
import gulpif from 'gulp-if';
import concat from 'gulp-concat';
import webpack from 'webpack';
import gulpWebpack from 'webpack-stream';
import named from 'vinyl-named';
import livereload from 'gulp-livereload';
import plumber from 'gulp-plumber';
import rename from 'gulp-rename';
import uglify from 'gulp-uglify';
import {log,colors} from 'gulp-util';
import args from './util/args'; gulp.task('scripts',()=>{
return gulp.src(['app/js/index.js'])
.pipe(plumber({
errorHandle:function(){ }
}))
.pipe(named())
.pipe(gulpWebpack({
module:{
loaders:[{
test:/\.js$/,
loader:'babel'
}]
}
}),null,(err,stats)=>{
log(`Finished '${colors.cyan('scripts')}'`,stats.toString({
chunks:false
}))
})
.pipe(gulp.dest('server/public/js'))
.pipe(rename({
basename:'cp',
extname:'.min.js'
}))
.pipe(uglify({compress:{properties:false},output:{'quote_keys':true}}))
.pipe(gulp.dest('server/public/js'))
.pipe(gulpif(args.watch,livereload()))
})
touch tasks/pages.js
import gulp from 'gulp';
import gulpif from 'gulp-if';
import livereload from 'gulp-livereload';
import args from './util/args'; gulp.task('pages',()=>{
return gulp.src('app/**/*.ejs')
.pipe(gulp.dest('server'))
.pipe(gulpif(args.watch,livereload()))
})
touch tasks/css.js
import gulp from 'gulp';
import gulpif from 'gulp-if';
import livereload from 'gulp-livereload';
import args from './util/args' gulp.task('css',()=>{
return gulp.src('app/**/*.css')
.pipe(gulp.dest('server/public'))
})
touch tasks/server.js
import gulp from 'gulp';
import gulpif from 'gulp-if';
import liveserver from 'gulp-live-server';
import args from './util/args'; gulp.task('serve',(cb)=>{
if(!args.watch) return cb(); var server = liveserver.new(['--harmony','server/bin/www']);
server.start(); gulp.watch(['server/public/**/*.js','server/views/**/*.ejs'],function(file){
server.notify.apply(server,[file]);
}) gulp.watch(['server/routes/**/*.js','server/app.js'],function(){
server.start.bind(server)()
});
})
touch tasks/browser.js
import gulp from 'gulp';
import gulpif from 'gulp-if';
import gutil from 'gulp-util';
import args from './util/args' gulp.task('browser',(cb)=>{
if(!args.watch) return cb();
gulp.watch('app/**/*.js',['scripts']);
gulp.watch('app/**/*.ejs',['pages']);
gulp.watch('app/**/*.css',['css']);
});
touch tasks/clean.js
import gulp from 'gulp';
import del from 'del';
import args from './util/args'; gulp.task('clean',()=>{
return del(['server/public','server/views'])
})
touch tasks/build.js
import gulp from 'gulp';
import gulpSequence from 'gulp-sequence'; gulp.task('build',gulpSequence('clean','css','pages','scripts',['browser','serve']));
touch tasks/default.js
import gulp from 'gulp'; gulp.task('default',['build']);
npm i gulp-util gulp-live-server del --save-dev
cnpm i babel-loader babel-core babel-preset-env babel-preset-es2015 --save-dev
vim gulpfile.babel.js
import requireDir from 'require-dir'; requireDir('./tasks');
cnpm i require-dir babel-register babel-preset-es2015 --save-dev
cnpm i gulp-sequence cookie-parser epxress morgan serve-favicon --save-dev
修改server/app.js文件:
app.use(require('connect-livereload')())
cnpm i connect-livereload babel-polyfill --save-dev
验证:
http://loalhost:3000
构建gulp项目的更多相关文章
- gulp构建自动化项目
'use strict'; var gulp = require('gulp'), browserSync = require('browser-sync').create(), SSI = requ ...
- 【Node.js学习笔记】使用Gulp项目自动化构建工具
刚接触node.js,对前端的一些东西还不是很清楚,据说Gulp这东西很强大,先来看看从网上抄的一段关于自动化构建的描述: 在为数众多的中小型软件作坊中,不存在自动化构建和发布工具.构建.交付准备环境 ...
- 使用 gulp 构建一个项目
本章将介绍 gulp-watch-path stream-combiner2 gulp-sourcemaps gulp-autoprefixer 您还可以直接学习以下模块: 安装 Node 和 gul ...
- 使用EXtjs6.2构建web项目
一.项目简介 众所周知ext是一款非常强大的表格控件,尤其是里边的grid为用户提供了非常多的功能,现在主流的还是用extjs4.0-4.2,但是更高一点的版本更加符合人的审美要求.因此,在今天咱们构 ...
- 基于dubbo构建分布式项目与服务模块
关于分布式服务架构的背景和需求可查阅http://dubbo.io/.不同于传统的单工程项目,本文主要学习如何通过maven和dubbo将构建分布项目以及服务模块,下面直接开始. 创建项目以及模块 ...
- Jenkins中构建Testcomplete项目的方法介绍
Jenkins的部署在上一篇随笔中已经和大家介绍了,下面我们介绍一下再Jenkins中构建testcomplete项目.我这里使用的是Testcomplete11,下面详细介绍一下构建步骤. 1.Je ...
- maven - Eclipse构建maven项目
前面的博文已经介绍了如何安装maven,本文将记录如何在Eclipse下构建maven项目. 一.Eclipse maven插件安装 关于安装Eclipse maven插件,网上有很多方法,这里推荐一 ...
- vue-cli快速构建Vue项目
vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm i ...
- 【转】使用Eclipse构建Maven项目 (step-by-step)
安装eclipse 及配置maven时,参考的资料!!! from:http://blog.csdn.net/qjyong/article/details/9098213 Maven这个个项目管理和构 ...
随机推荐
- Linux 管理服务启动工具
工具:ntsysv(图形,可以关闭开启服务) 安装包:ntsysv-1.3.30.2-2.el5 工具:chkconfig –list(文字,开启关闭服务) 自定义加服务:执行脚本放入:/etc/in ...
- CentOS安装系统安装完成
一.安装centOS操作系统的相关步骤? 1)第一步:系统安装的方式,选择全新安装,第一行表示安装系统,第三行当用户名密码无法开机或密码忘记的时候启动 2)第二步:是否检查光盘,选择Skip跳过,没事 ...
- Win32汇编学习(7):鼠标输入消息
这次我们将学习如何在我们的窗口过程函数中处理鼠标按键消息.例子演示了如何等待鼠标左键按下消息,我们将在按下的位置显示一个字符串. 理论: 和处理键盘输入一样,WINDOWS将捕捉鼠标动作并把它们发送到 ...
- 要想成为前端大神,那些你不得不知晓的web前端命名规范。
一.Web语义化 1.1 H5的语义化 对于经验资深的前端er,在给web布局时,相信都会很注重标签和命名的规范.尤其是随着html5的普及发展,更是把web前端语义化推向一个新的台阶上.比如html ...
- 使用 R 语言挖掘 QQ 群聊天记录
1.获取数据 从 QQ 消息管理器中导出消息记录,保存的文本类型选择 txt 文件.这里获取的是某群从 2016-04-18 到 2016-05-07 期间的聊天记录,记录样本如下所示. 消息记录(此 ...
- Vue 兼容 IE9 全功能正常使用的全面解决方案
https://blog.csdn.net/VhWfR2u02Q/article/details/80863626
- java jdk动态代理学习记录
转载自: https://www.jianshu.com/p/3616c70cb37b JDK自带的动态代理主要是指,实现了InvocationHandler接口的类,会继承一个invoke方法,通过 ...
- 浅谈中大型企业CMDB的建设
作者:嘉维蓝鲸产品总监,贺勇 针对CMDB这个主题,之前一直想写一篇文章来表达我的看法,但是之前一直不敢写,为什么?因为CMDB这个主题属于一提大家都懂,但是深入讨论大家都晕菜的一个话题:在2018年 ...
- 连接SQLsever数据库在C#中不能操作的问题
最近小组成员在用C#连接数据库进行操作的时候,总是注册不起用户,提示为sql.client值不能为NULL,经过了一上午的百度查询,讨论,总是找不到问题所在,不得已去问了老师,老师是专业的软件工程师, ...
- event对象的clientX,offsetX,screenX,pageX
chrome: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clie ...