gulpjs.png
本人一直开发iOS，现在属于前端菜鸟。这也只是一片总结笔记，文中有错误欢迎纠正
这篇文章以新建一个移动端web项目为例
为什么要使用node的构建工具
一句话：自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。只需要在配置文件（这里指gulpfile.js）正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作
为什么选择gulp
开始
安装gulp
检查npm版本：
npm -v
这里使用mac开发,npm版本3.10.10 ，node跟NPM做开发的基本都是有安装，没有的话出门右转百度全局安装 gulp：
npm install --global gulp查看gulp版本：
gulp -v首先以需要有项目，大概是这样
|____dist
| |____img
|____src
| |____css
| |____img
| |____index.html
| |____js
| |____stylus
新建package.json, 然后会让你键入些author，license，description等，这个自行填写就行
cd ProjecPathyourProjecPath为你项目的绝对路径
npm init安装gulp及常用插件
npm install --save-dev gulp browser-sync gulp-autoprefixer gulp-clean-css gulp-stylus gulp-concat gulp-uglify gulp-htmlmin gulp-rev gulp-rev-collector gulp-imagemin imagemin-pngquant gulp-clean run-sequence del vinyl-paths
执行上面这条命令后会安装以下插件（这里再安利一个插件gulp-file-include）
var gulp = require('gulp');
/*引入gulp及相关插件 require('node_modules里对应模块')*/
// css js html
var stylus = require('gulp-stylus'); //编译stylus
var cleanCss = require('gulp-clean-css'); // 压缩css
var autoprefixer = require('gulp-autoprefixer');// css前缀
var uglify = require('gulp-uglify'); //压缩JS
var htmlmin = require('gulp-htmlmin'); //压缩html
var rev = require('gulp-rev'); // 给文件加入版本号
var revCollector = require('gulp-rev-collector'); // 替换html中的文件名
var concat = require('gulp-concat'); // 合并
var browserSync = require('browser-sync').create(); // 浏览器运行
var clean = require('gulp-clean'); //清空文件夹，避免文件冗余
var runSequence = require('run-sequence'); //执行顺序，避免
const imagemin = require('gulp-imagemin'); // 压缩图片
const pngquant = require('imagemin-pngquant');
var del = require('del'); // 下面两个就是在管道中 进行文件删除操作
var vinylPaths = require('vinyl-paths');
- 新建gulpfile.js文件用于配制
touch gulpfile.js
这里仅是一个stylus的编译示例使用gulp构建项目最重要的工作就是编写gulpfile.js配置文件
var gulp = require('gulp');
var stylus = require('gulp-stylus'); //编译stylus
var autoprefixer = require('gulp-autoprefixer');// css前缀
const SRC = './src/'
const SRC_CSS = SRC + 'css'
const SRC_STYLUS = SRC + 'stylus'
const SRC_STYLUS_ALL = SRC_STYLUS + '/**/*.styl'
// ======================================================css
gulp.task('compile-stylus', function() {
return gulp.src(SRC_STYLUS_ALL)
.pipe(stylus({
compress: false
}))
.pipe(autoprefixer({ // 支持到IE9
browsers: 'last 3 versions'
}))
.pipe(gulp.dest(SRC_CSS))
});
- gulp使用管道的方式对文件进行处理，每个task都需要有src输入文件(目录)和对应的输出dest
所以对于构建项目结构一般将src，dist构建为独立的两个目录，所以最后目录大概是这样
.
|____dist
| |____img
|____gulpfile.js
|____json
| |____css
| |____js
|____package.json
|____src
| |____css
| |____img
| |____index.html
| |____js
| | |____index.js
| | |____jquery-1.11.3.min.js
| |____stylus
| | |____layout.styl
| | |____reset.styl
步骤大概就是这样，查看demo
