gulp-tasks
收集开发常用的 tasks 任务列表,汇总成 gulp-tasks-build。
基于 amazeui-gulp-tasks 的结构,综合常用的 tasks 任务列表汇总而成,让 Coding 更 Happy !。
问题
痛苦的安装,每一个项目引用,都要 install 这个东东,并且编译依赖,好慢啊,而且明显的有点浪费,本来只需要安装一次就行了啊。 应该提供一种方式,比如我安装到全局,但在项目中可以引用,这样就方便了。
所以要使用一种能自动 require('全局模块') 的方式给项目引用,我最先想到的是在想使用的地方,使用npm link到local。
//这个配置待定下,上次使用的配置,忘记了,改天再整理下
#在项目开发目录,使用软链接 ln –s 源文件 目标文件(这个效果不好,貌似缺了某些依赖,运行不起来)
ln -s /usr/local/lib/node_modules/require-global ./node_modules/require-global
ln -s /usr/local/lib/node_modules/gulp ./node_modules/gulp
ln -s /usr/local/lib/node_modules/run-sequence ./node_modules/run-sequence
ln -s /usr/local/lib/node_modules/gulp-tasks-build ./node_modules/gulp-tasks-build
//我是要开发修改的,不安装全局了(sass 每次编译好慢)
ln -s ~/github/webcoding/gulp-tasks ./node_modules/gulp-tasks-build
### 我想到可以install 一个模块去加载全局的模块,于是发现了 require-global
npm install -g require-global
browser-sync browserify browserify-shim del derequire gulp gulp-autoprefixer gulp-cache gulp-concat gulp-csso gulp-eslint gulp-gh-pages gulp-git gulp-header gulp-if gulp-imagemin gulp-less gulp-load-plugins gulp-md5-plus gulp-minify-html gulp-nodemon gulp-plumber gulp-rename gulp-replace gulp-sftp gulp-shell gulp-size gulp-sourcemaps gulp-stylus gulp-uglify gulp-util gulp-zip lodash markit-json object-assign require-dir run-sequence vinyl-buffer vinyl-source-stream watchify
如果不用显式的运行,如果全局安装有,自动去查询加载就好了。
在网上也发现已经有这样的需求,weakish 回答可以尝试使用 autod,这个是什么鬼,通过项目文件引用自动生成依赖,貌似不合适。
Task list
gulp clean //洗刷刷,重新来!
gulp copy //copy 项目依赖文件到编译目录,如字体,外部依赖的 css/js
gulp html //copy 项目 html 到编译目录
gulp styles //编译样式,根据配置类型,可编译 less sass 或 stylus
gulp browserify //编译 JS,编译 CommonJS 格式的模块
styles 和 browserify,在开发环境通过 map 调试,生成环境其引用会追加版本号
gulp server //开发预览服务器
开发环境使用:gulp dev
生产使用:NODE_ENV=production gulp
TODO list
使用 webpack 形式组织及打包文件?
这里不集成了,因为 webpack 打包的独立性,独自汇总一个使用示例项目,参见 webpack-tools
rename.js //重命名脚本,可集成编译或copy 的任务流中,完成指定重命名
replace.js //自定义替换脚本,可集成编译或copy 的任务流中,完成指定内容的替换
gulp uglify //压缩/丑化 task,待定(编译处已处理)
gulp jshint //JS 格式校验(暂未使用)
gulp images //对样式中图片进行处理(暂未使用)
gulp-imagemin + imagemin-pngquant 或 gulp-tinypng 形式
gulp publish //发布项目
gulp upload //上传文件到远程 FTP 服务器
gulp zip //打包 build 后的项目
gulp markdown //编译 markdown 文件,生成文档
gulp help //输出此 gulp-tasks 的帮助
本项目测试及效果体验
下载安装
git clone https://github.com/webcoding/gulp-tasks.git
npm install
bower install //引入的外界依赖,如 normalize.css pure.css react 等
运行
gulp dev 或者 NODE_ENV=production gulp
安装及使用
$ npm install gulp-tasks-build --save-dev
在 gulpfile.js
中调用任务:
// gulpfile.js 'use strict'; var gulp = ;var tasks = ;var runSequence = ; // 项目配置var projectConfig = projectName: 'tests' //项目名称,可用于打 zip 包 srcRoot: 'tests' //项目源目录 distRoot: 'dist' //编译输出目录; // Task配置var config = projectName: projectConfigprojectName srcRoot: projectConfigsrcRoot distRoot: projectConfigdistRoot styles: type: 'sass' //编译类型 less sass 或 stylus src: projectConfigsrcRoot + '/scss/style.scss' //也可以是数组 autoPrefixer: //autoPrefixer 配置,如果为空,则按项目内部默认值设定 dist: projectConfigdistRoot + '/css' watches: projectConfigsrcRoot + '/**/*.scss' banner: false ; ; gulp; // 不要直接使用 gulp.task('dev', ['build', 'server']);// build 和 server 没有先后执行顺序,可能时序错乱,建议如下使用gulp;
autoPrefixer 默认配置
var autoPrefixer = [
'ie >= 9',
'ie_mob >= 10',
'ff >= 30',
'chrome >= 34',
'safari >= 7',
'opera >= 23',
'ios >= 7',
'android >= 2.3',
'bb >= 10'
];
任务及配置说明
styles
编译 styles。配置如下:
var config = styles: type: 'less' // 编译类型 less sass 或 stylus(gulp-sass 安装编译超级慢) src: './tests/less/test.less' // 源文件 autoPrefixer: {} // autoprefixer 设置, dist: './dist/css' // 部署目录 watches: '' // watch 的文件,如果不设置则 watch `src` 里的文件 banner: false // 是否添加 banner,布尔值或者 {template: '', data: {}}
browserify
使用 Browserify 打包 JS。
var isProduction = processenvNODE_ENV === "production";var config = browserify: bundleOptions: entries: './tests/js/app.js' debug: !isProduction cache: {} packageCache: {} filename: 'app.js' transforms: 'browserify-shim' global: true plugins: dist: 'dist/js' banner: false
uglify
var config = uglify: src: './tasks/*.js' dist: './dist' banner: false
markdown
还未启用
var config = md: src: 'README.md' data: pluginTitle: 'Gulp Tasks for happyCoding' pluginDesc: 'gulp-tasks-build 让 Coding 更 Happy!!!' // gulp-rename 设置 { filebasename = filebasename; if filebasename === 'readme' filebasename = 'index'; fileextname = '.html'; } { if filerelative === 'index.html' return 'dist' return 'dist/docs'; }
clean
清理任务:
var config = clean: '' // 要清理的文件夹;
server
开发预览服务器:编译开发预览、编译生产代码、发布到生产
gulp dev
NODE_ENV=production gulp build
gulp publish
release
还未启用
发布任务:
publish:tag
- 添加tag
并 push 到远程 git 仓库publish:npm
- 发布到 NPMpublish:docs
- Push 文档到 GitHubgh-pages
分支