gulp提高微信小程序开发效率
const fs = require('fs')
const path = require('path')
const gulpLoadPlugins = require('gulp-load-plugins')
const del = require('del')
const runSequence = require('run-sequence')
const inquirer = require('inquirer')
const generatePage = require('generate-weapp-page')
const plugins = gulpLoadPlugins()
const api = require('./src/utils/config')
const env = process.env.NODE_ENV || 'development'
const isProduction = () => env === 'production'
function generateFile (options) {
const files = generatePage({
root: path.resolve(__dirname, './src/pages/'),
name: options.pageName,
scss: options.styleType === 'scss',
css: options.styleType === 'css',
json: options.needConfig
})
files.forEach && files.forEach(file => plugins.util.log('[generate]', file))
return files
}
const filename = path.resolve(__dirname, 'src/app.json')
const now = fs.readFileSync(filename, 'utf8')
const temp = now.split('\n // Dont remove this comment')
if (temp.length !== 2) {
return plugins.util.log('[generate]', 'Append json failed')
}
const result = `${temp[0].trim()},
"pages/${options.pageName}/${options.pageName}"
${temp[1].trim()}
`
fs.writeFileSync(filename, result)
}
* 清除文件
*/
gulp.task('clean', del.bind(null, ['dist/*']))
* 添加eslint规范
*/
gulp.task('lint', () => {
return gulp.src(['*.{js,json}', '**/*.{js,json}', '!node_modules/**', '!dist/**', '!**/bluebird.js'])
.pipe(plugins.eslint())
.pipe(plugins.eslint.format('node_modules/eslint-friendly-formatter'))
.pipe(plugins.eslint.failAfterError())
})
* 编译js文件
*/
gulp.task('compile:js', () => {
return gulp.src(['src/**/*.js'])
.pipe(plugins.sourcemaps.init())
.pipe(plugins.babel())
.pipe(plugins.if(isProduction, plugins.uglify()))
.pipe(plugins.sourcemaps.write('.'))
.pipe(gulp.dest('dist'))
})
* 编译wxml文件
*/
gulp.task('compile:wxml', () => {
return gulp.src(['src/**/*.wxml'])
.pipe(plugins.sourcemaps.init())
.pipe(plugins.if(isProduction, plugins.htmlmin({
collapseWhitespace: true,
// collapseBooleanAttributes: true,
// removeAttributeQuotes: true,
keepClosingSlash: true, // wxml
removeComments: true,
removeEmptyAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
})))
.pipe(plugins.rename({ extname: '.wxml' }))
.pipe(plugins.sourcemaps.write('.'))
.pipe(gulp.dest('dist'))
})
/**
* 将scss转为css并输出到dist目录
*/
gulp.task('compile:scss', () => {
return gulp.src(['src/**/*.scss'])
.pipe(plugins.sourcemaps.init())
.pipe(plugins.sass())
.pipe(plugins.if(isProduction, plugins.cssnano({ compatibility: '*' })))
.pipe(plugins.rename({ extname: '.wxss' }))
.pipe(plugins.sourcemaps.write('.'))
.pipe(gulp.dest('dist'))
})
* 编译json文件
*/
gulp.task('compile:json', () => {
return gulp.src(['src/**/*.json'])
.pipe(plugins.sourcemaps.init())
.pipe(plugins.jsonminify())
.pipe(plugins.sourcemaps.write('.'))
.pipe(gulp.dest('dist'))
})
* 编译图片文件
*/
gulp.task('compile:img', () => {
return gulp.src(['src/**/*.{jpg,jpeg,png,gif}'])
.pipe(plugins.imagemin())
.pipe(gulp.dest('dist'))
})
* 编译源文件到目标目录
*/
gulp.task('compile', ['clean'], next => {
runSequence([
'compile:js',
'compile:wxml',
'compile:scss',
'compile:json',
'compile:img'
], next)
})
* 复制文件到dist目录
*/
gulp.task('extras', [], () => {
return gulp.src([
'src/**/*.*',
'!src/**/*.js',
'!src/**/*.wxml',
'!src/**/*.scss',
'!src/**/*.json',
'!src/**/*.{jpe?g,png,gif}'
])
.pipe(gulp.dest('dist'))
})
* Build
*/
gulp.task('build', ['lint'], next => runSequence(['compile', 'extras'], next))
* 监听文件变化
*/
gulp.task('watch', ['build'], () => {
gulp.watch('src/**/*.js', ['compile:js'])
gulp.watch('src/**/*.wxml', ['compile:wxml'])
gulp.watch('src/**/*.scss', ['compile:scss'])
gulp.watch('src/**/*.json', ['compile:json'])
gulp.watch('src/**/*.{jpe?g,png,gif}', ['compile:img'])
})
* 执行gulp generate自动生成文件目录,会自动生成一个文件目录,包括wxml,scss,json,js文件,并把页面加到app.json中
*/
gulp.task('generate', next => {
inquirer.prompt([
{
type: 'input',
name: 'pageName',
message: 'Input the page name',
default: 'index'
},
{
type: 'confirm',
name: 'needConfig',
message: 'Do you need a configuration file',
default: false
},
{
type: 'list',
name: 'styleType',
message: 'Select a style framework',
// choices: ['less', 'scss', 'css'],
choices: ['scss'],
default: 'scss'
}
])
.then(options => {
const res = generateFile(options)
if (res) generateJson(options)
})
.catch(err => {
throw new plugins.util.PluginError('generate', err)
})
})
* 默认任务
*/
gulp.task('default', ['watch'])
"lint": "gulp lint",
"dev": "cross-env NODE_ENV=development gulp watch",
"generate": "gulp generate",
"build": "cross-env NODE_ENV=production gulp build"
},
gulp提高微信小程序开发效率的更多相关文章
- 微信小程序开发03-这是一个组件
编写组件 基本结构 接上文:微信小程序开发02-小程序基本介绍 我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ...
- 微信小程序开发教程 #043 - 在小程序开发中使用 npm
本文介绍了如何在微信小程序开发中使用 npm 中包的功能,大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频版更新. 微信小程序在发布之初没有对 npm 的支持功能,这也是目前很多前端开发 ...
- 微信小程序开发中的二三事之网易云信IMSDK DEMO
本文由作者邹永胜授权网易云社区发布. 简介 为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程.用产品的话说就是: 云信 IM 小程序 SDK 的能力 ...
- 让微信小程序开发如鱼得水
关于微信小程序开发一直想写一篇相关的文章总结和记录下,结果拖延症犯了迟迟没有下笔:这不最近天气不错,于是找一个空闲的下午将这篇文章输出下(好像跟天气没啥关系),那我们就开始吧! 注意:本文默认开发 ...
- VSCode 微信小程序 开发环境配置 详细教程
本博客已暂停更新,需要请转新博客http://www.whbwiki.com/231.html 配置 VsCode 微信小程序开发环境并非不用官方的 微信小程序开发者工具 ,而是两者配合适用,可以极大 ...
- 微信小程序开发库grace vs wepy
grace和wepy都是辅助小程序开发的开源库,本文对两者做个对比. 注:本文是作者本人的一些拙见,纯粹的技术讨论,不想引起技术信仰之争,欢迎积极.正向的讨论及建议. 如果你还不了解Grace, 请参 ...
- 微信小程序开发 (资料汇总,谁还没被坑过?希望助你绕过一些坑)
最近帮人家做一个微信小程序,刚好想熟悉一下.由于牵扯到多用户使用系统,以及数据共享,所以自然架构选择了,客户端和服务器的方式. 后台服务器是windows server,后台程序是.Net WebA ...
- 零基础入门微信小程序开发
注:本文来源于:<零基础入门微信小程序开发> 课程介绍 本达人课是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件.页面样式文件.Ja ...
- 微信小程序开发学习资料
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
随机推荐
- spring AOP 和自定义注解进行身份验证
一个SSH的项目(springmvc+hibernate),需要提供接口给app使用.首先考虑的就是权限问题,app要遵循极简模式,部分内容无需验证,用过滤器不能解决某些无需验证的方法 所以最终选择用 ...
- C# 自定义样式实现菜单和工具栏的分割线
在做WinForm界面布局时,菜单和工具栏必不可少!但是MenuStrip和ToolStrip不能够对边框的样式直接设置,如果想实现菜单和工具栏之间的分割线就不容易实现:今天查阅了一下msdn找到了一 ...
- Nodejs学习笔记(十五)--- Node.js + Koa2 构建网站简单示例
目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装项目其它需要包 清除冗余文件并重新规划项目目录 配置文件 规划示例路由,并新建相关文件 实现数据访问和业务逻辑相关方法 编写mys ...
- Rsync服务
第1章 Rsync开篇介绍 1.1 rsync的定义 Rsync是一款开源的.快速的.多功能的.可实现全量及增量的本地或远程数据同步备份的优秀工具.Rsync软件适用于unix/linux/windo ...
- 获取所有栈的信息,只有最上面的和最下面的,但是不能获取栈中间的activity信息
直接在cmd窗口上输入 adb shell后,再输入dumpsys activity activities,可以看到所有的activity以及相关栈状态
- 自定义view-滑动开关
介绍 前段时间,我看到了一篇关于可滑动开关Switch组件的文章,效果图如下: 思路也挺简单的:这个控件主要由田径场式背景和滑块组成.他将田径场式背景分为3部分,最左边的半圆,中间的两条直线部分和最右 ...
- [转载] Kafka+Storm+HDFS整合实践
转载自http://www.tuicool.com/articles/NzyqAn 在基于Hadoop平台的很多应用场景中,我们需要对数据进行离线和实时分析,离线分析可以很容易地借助于Hive来实现统 ...
- JavaScript数组对象方法
数组的方法:首先,数组的方法有数组原型方法,也有从object对象继承来的方法.这里只详细说明一下数组的原型方法. (1)join:把数组中的所有元素放入一个字符串.元素通过指定的分隔符进行分隔. 例 ...
- YOLO 算法框架的使用一(初级)
YOLO官方框架使用C写的,性能杠杠的,YOLO算法,我就不做过多介绍了.先简单介绍一下这个框架如何使用.这里默认是yolo2,yolo1接近过时.环境 推荐ubuntu 或者centos YOLO是 ...
- 快速排序Golang版本
Created by jinhan on --. Tip: http://blog.csdn.net/zhengqijun_/article/details/53038831 See: https:/ ...