构建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

上一篇:从html富文本中提取纯文本


下一篇:bitnami gitlab 配置域名