使用gulp构建前端项目

gulpjs.png

本人一直开发iOS，现在属于前端菜鸟。这也只是一片总结笔记，文中有错误欢迎纠正
这篇文章以新建一个移动端web项目为例

为什么要使用node的构建工具

一句话：自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。只需要在配置文件（这里指gulpfile.js）正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作

为什么选择gulp

• 生态圈庞大（插件多），嗯，简单,简单,简单
• 相对webpack来说gulp的pipe配置更加直观明了
• gulp作为后起之秀，Grunt就显得有些过时

---

开始

安装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 ProjecPath yourProjecPath为你项目的绝对路径
  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-html-import）

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配置文件

查看demo的完整配置

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

---

gulp文档
张老师的stylus文档