又开始公司的新项目了。。。又到了无聊的切图时间，没办法，拿人钱财替人消灾啊 - -！

那当我们拿到公司新项目的时候我们需要做些什么呢？ 下面就来分享一下我的工作步骤吧（仅使用于初学者，大神勿见怪- -，有不好的地方希望指出，十分感谢）

1. 整版浏览

这是一个废话的过程。。。但是缺是必不可少的一步，我也不得不说一下

首先预览所有设计图页面，设计需求文案等在脑海中大概的思考一下在哪里需要用到什么，到时候怎么写，还有一些图纸中可能不好实现或者不太清楚的
可以找设计师确认以免到时候耽误时间。

当所有页面全过完之后，回想一下，需要用到哪些技术，哪一些板块是公共的需要提取，哪一些样式是重复的，这些都有个大概思路后可以进行下一步了。

2. 环境搭建

一个好的本地环境，直接决定你的切图码页面流畅度与效率，当然你的扎实的基础功也是必不可少嘛- -。

编辑器需求

适合自己的才是最好的， 我一直用的sublime编辑器，轻量便捷，插件风格都是自己根据喜好与日常需求搭配，当然还有很多好用的编辑器，
例如 ： webstorm 这款很强大，基本功能全都有，很重量级但是插件基本都不需要安装了。。。其他的也有一些。只是都没用过，就不来介绍了- -（Atom， Visual Studio Code， Brackets 。。。）

代码环境

我这边用的gulp搭建的环境，我只需要在环境中写h+c+js 保存后页面会直接同步更新我写的页面。 你也可以用webpack或者grunt 搭建你的代码环境，看你喜好

1. 在中间做了stylus转css并添加前缀然后压缩输出到新的文件夹
2. 将es6语法js 经过babel转成普通js代码并重命名压缩到新的文件夹
3. 在html中预留位置 插入刚转义完成的css+js
4. 在浏览器中同步刷新页面（可多端测试）

那如何搭建这个环境呢？ 我可以献丑分享一下我的gulpfile文件 ??

首先npm包需要哪一些呢？

    "babel-polyfill": "^6.9.1",
    "babel-preset-es2015": "^6.6.0",
    "browser-sync": "^2.23.6",
    "browserify": "^15.2.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-browserify": "^0.5.1",
    "gulp-clean": "^0.4.0",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^3.2.3",
    "gulp-cssnano": "^2.1.2",
    "gulp-rename": "^1.2.2",
    "gulp-sync": "^0.1.4",
    "gulp-uglify": "^1.5.3",
    "vinyl-source-stream": "^2.0.0"
    "gulp-autoprefixer": "^6.0.0"

这是我的package.json中的一些插件依赖, stylus.css我是编辑器直接转义成css的

在gulp配置中我的代码如下

const gulp = require(‘gulp‘);
const babel = require(‘gulp-babel‘);
const uglify = require(‘gulp-uglify‘);
const rename = require(‘gulp-rename‘);
const cssnano = require(‘gulp-cssnano‘);
const clean = require(‘gulp-clean‘);
const concat = require(‘gulp-concat‘);  //文件合并 按需使用
const browserify = require(‘browserify‘);
const source = require(‘vinyl-source-stream‘);
const browserSync = require(‘browser-sync‘).create();
const prefixer = require(‘gulp-autoprefixer‘);

// 编译并压缩js
gulp.task(‘convertJS‘, function(){
  return gulp.src(‘src/js/pages/*.js‘) //执行的文件路径
    .pipe(babel({
      presets: [‘es2015‘]  //es6转义
    }))
    .pipe(gulp.dest(‘dist/js/pages‘))  //生成新的文件
    .pipe(uglify())  //压缩
    .pipe(rename(function(path){  
      path.basename += ‘.min‘;  // 重命名
    }))
    .pipe(gulp.dest(‘dist/js/pages‘))  //生成新的压缩文件
    .pipe(browserSync.reload({stream:true}));  //通知浏览器刷新
})

// 合并并压缩css
gulp.task(‘convertCSS‘, function(){
  return gulp.src(‘src/css/pages/*.css‘)
    .pipe(prefixer({
            browsers: [‘> 0.5%‘, ‘last 4 versions‘, ‘not ie <= 8‘],  // css后缀匹配
            cascade: false
        }))
    .pipe(gulp.dest(‘dist/css/pages‘))
    .pipe(cssnano({zindex: false}))  // css压缩， z-index是防止你的z-index压缩后变成1的问题
    .pipe(rename(function(path){
      path.basename += ‘.min‘;
    }))
    .pipe(gulp.dest(‘dist/css/pages‘))
    .pipe(browserSync.reload({stream:true}));
})
gulp.task(‘watchHtml‘, function(){
  return gulp.src(‘src/pages/*.html‘)
    .pipe(gulp.dest(‘dist/pages‘))
    .pipe(browserSync.reload({stream:true}));
})
// 监视文件变化，自动执行任务
gulp.task(‘watch‘, function(){
  browserSync.init({  
      port: 2017,  
      server: {  
          baseDir: [‘dist/‘]  
      }  
  });  
  gulp.watch(‘src/pages/*.html‘, [‘watchHtml‘]);  // 监视文件发生变化后执行‘watchHtml’ 任务，下面同样
  gulp.watch(‘src/css/pages/*.css‘, [‘convertCSS‘]);
  gulp.watch(‘src/js/pages/*.js‘, [‘convertJS‘]);
})

//清理dist文件  命令gulp clean
gulp.task(‘clean‘, function(){
  return gulp.src([‘dist/‘],{read:false})
    .pipe(clean());
})

gulp.task(‘start‘, [‘convertJS‘, ‘convertCSS‘, ‘watchHtml‘, ‘watch‘]);  // 一键执行gulp start 

这些配置好之后，你只要在git bush中运行gulp start 就OK啦，当然这里你文件结构还没有哦。。。你只需一个这样的文件结构就好啦

-node_moules

-gulpfile,js

-dist(会生成的文件目录)

-src
    -css
        -*.css
    -js
        -*.js
    -pages
        -*.html

-package.json

上面就完成你的代码环境配置啦，可以开始愉快的敲代码了，你可以在第一次运行后发现生成的dist文件，这里面你也可以放入你需要的静态资源与第三方文件哦，后期项目可以直接拿dist文件就好啦。

无聊的切图

原文：https://www.cnblogs.com/mrzll/p/10251101.html