在公司做前端开发期间，一直习惯于用IDE工具Webstorm，公司电脑配置高，很流畅。但是回家后笔记本配置问题，开了IDE后就会很卡，家里笔记本用了一年的Webstorm了，实在受不了太卡了，于是上周安装了Sublime 2，果然轻便快捷很多，很流畅。
Sublime 2 注册码网上一搜一大堆，安装好后要安装包管理工具，方便后期安装开发插件，网址是:https://packagecontrol.io/installation，
然后选择自己Sublime对应的版本，把那一长串代码输入控制台等待安装完成就行了。
好啦，包管理工具安装好啦，接下来就可以安装适合自己开发的插件啦，首先打开包管理工具菜单:
然后会出现安装插件输入框，因为我的项目用的是less，Sublime默认不支持less语法高亮检测等，所以我安装less插件:
选择对应的插件按回车就行，注意，请在网络好的时段下载，否则控制台会提示失败，安装好后重启Sublime即可。
好啦，工具准备好了，下面附上我自己的项目构建工具，我用的是gulp构建：
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "01.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies":{
"gulp": "^3.8.11",
"gulp-less": "^3.0.0",
"gulp-clean-css": "^2.0.12",
"gulp-notify": "^2.2.0",
"gulp-uglify": "^1.5.1",
"gulp-jshint": "^2.0.0",
"gulp-load-plugins": "^1.2.4",
"gulp-util":"^3.0.7",
"gulp-watch-path": "^0.1.0",
"stream-combiner2": "^1.1.1",
"chalk":"^1.1.1",
"gulp-autoprefixer": "^3.1.0"
}
}
/**
* Created by lenovo on 2016/9/14.
*/
var gulp=require('gulp'),
gutil=require('gulp-util'),
less=require('gulp-less'),
cssmin = require('gulp-clean-css'),
uglify = require('gulp-uglify'),
jshint = require('gulp-jshint'),
chalk = require('chalk'),
autoprefixer=require('gulp-autoprefixer'),
watchPath = require('gulp-watch-path'),
combiner = require('stream-combiner2'),
paths = require('path'),
fs = require('fs');
//相对路径，结尾一定要加上 /
var baseUrl = 'project/src/',
distUrl='project/dist/';
var lessUrl = baseUrl + 'less/',//未压缩的less目录
cssUrl = distUrl + 'css/',//压缩后的css目录
jsUrl = baseUrl + 'js/',//未压缩的js目录
minjsUrl = distUrl + 'minjs/',//压缩后js目录
styleImg = baseUrl + 'images/styleimg/';//合并后的图片目录
var handleError=function(errorType,err){
gutil.log(errorType);
gutil.log('fileName: ', chalk.red.bold(err.fileName));
gutil.log('lineNumber: ', chalk.red.bold(err.lineNumber));
gutil.log('message: ', chalk.red.bold(err.message));
gutil.log('plugin: ', chalk.red.bold(err.plugin));
}
gulp.task('watchLess', function () {
gulp.watch(lessUrl + '/**/*.less', function(event){
var paths =watchPath(event , lessUrl , cssUrl),
filePath = paths.srcPath,
distPath=paths.distDir,
srcFilename = paths.srcFilename,//文件名
err_flag=0;
gulp.src(filePath)
.pipe(less())
.on('error',function(err){
handleError('Less error',err);
this.end();
err_flag=1; //错误
return false;
})
.pipe(cssmin())
.pipe(gulp.dest(distPath))
.on('end', function(){
if(!err_flag){
gutil.log(chalk.green.bold('success--> '+srcFilename));
}
});
//gutil.log(chalk.green.bold('good'));
//var colors=gutil.colors;
//console.log(colors.underline.bgBlue('XXX'));
});
});
gulp.task('jsmin', function () {
gulp.watch(jsUrl + '*.js',function(event){
var paths=watchPath(event,jsUrl, minjsUrl),
filePath = paths.srcPath,
distPath=paths.distDir,
srcFilename = paths.srcFilename,//文件名
err_flag=0;
gulp.src(filePath)
//.pipe(jshint())
//.pipe(jshint.reporter('default'))
.pipe(uglify({
//mangle: true,//类型：Boolean 默认：true 是否修改变量名
mangle: {except: ['require' ,'exports' ,'module' ,'$']}//排除混淆关键字
}))
.on('error',function(err){
handleError('JS error',err);
this.end();
err_flag=1;
return false;
})
.pipe(gulp.dest(distPath));
if(!err_flag){
gutil.log(chalk.green.bold('success--> '+srcFilename));
}
});
});
//gulp.task('watch', function () {
// gulp.watch('src/js/*.js', ['jsmin']); //当所有js文件发生改变时，调用jsmin任务
// gulp.watch('src/**/*.less', ['testLess']); //当所有less文件发生改变时，调用testLess任务
//});
gulp.task("default",function(){
gulp.start(["watchLess","jsmin"]);
});
国内npm下载，建议用cnpm，防止被墙。
好啦，准备工作已经ok，享受撸码的快感吧！
