front-end-gulp-pattern
v1.0.2
Published
gulp-cli wrapper with own read-only gulpfile for front-end.
Downloads
2
Maintainers
Readme
front-end-gulp-pattern
gulp-cli
wrapper with own read-only gulpfile
for front-end.
Provides own gulp-cli
binary as font-end-gulp
.
Should be configured by package.json
.
Usage
Create
package.json
file in root of your project;You should set "dependencies", "postinstall" script and "gulp" hash for your
front-end-gulp
tasks;Minimal example of
package.json
:json { "dependencies": { "front-end-gulp-pattern": "^1" }, "scripts": { "postinstall": "./node_modules/.bin/front-end-gulp --production" }, "gulp": { "distclean": [ "./node_modules" ] } }
After
npm install
front-end-gulp
will do nothing, but you can run:./node_modules/.bin/front-end-gulp distclean
to removenode_modules
directory;If you're using git then you should add
node_modules
to.gitignore
;--production
flag will minify styles and scripts;Also you can use it with web-front-end-deploy as git-submodule, do it in root of your project:
```bash
$ git submodule add https://github.com/unclechu/web-front-end-deploy
$ ln -s ./web-front-end-deploy/deploy.sh
$ mkdir _deploy
$ cd _deploy
$ ln -s ../web-front-end-deploy/tasks/11-front-end-gulp-pattern_symbolic_link.sh
$ ln -s ../web-front-end-deploy/tasks/13-front-end-gulp-pattern_default_tasks.sh
$ cd ..
```
And set <i>"postinstall"</i> key in key <i>"scripts"</i> of `package.json` to: "./deploy.sh".
`13-front-end-gulp-pattern_default_tasks.sh` will do:
```
./node_modules/.bin/front-end-gulp --production
```
And `11-front-end-gulp-pattern_symbolic_link.sh` will create symbolic link `front-end-gulp` to `./node_modules/.bin/front-end-gulp` in root of your project. In this case you should add `front-end-gulp` to `.gitignore` and to <i>"distclean"</i>:
```json
{
"dependencies": {
"front-end-gulp-pattern": "^1"
},
"scripts": {
"postinstall": "./deploy.sh"
},
"gulp": {
"distclean": [
"./node_modules",
"./front-end-gulp"
]
}
}
```
- Structure of definition of all tasks in "gulp" key (except "distclean"):
...
"task-type": {
"own-group-name1": {
// params
},
"own-group-name2": {
// params
}
}
...
To be continued...
Supported tasks types
- Sprites (spritesmith);
- Styles:
- Stylus;
- Less.
- Scripts:
- Browserify (transforms supported, you can use LiveScript, CoffeeScript, etc.)