前端-自动化构建

　　在公司搞前端一直用的Wenstorm开发，由于公司电脑配置高，因此开了n多浏览器窗口和ps后，依然能流畅运行Webstorm，可是在家里笔记本就没这么快了，在家忍受了1年Websotrm龟速后，实在忍不住了，因而前几天配置了Sublime，一会儿快多啦，安装好后记得安装包管理工具，方便后期拓展插件用，安装包管理工具方法以下:

　　进入网站：https://packagecontrol.io/installation，找到这一坨代码：

　　根据本身Sublime版本选择对应的代码，选择好后复制，接着打开Sublime控制台，输入这段代码后Sublime将自动安装包管理工具，安装成功后重启便可。

　　安装好后，接着要拓展插件啦，打开：

　　接着会弹出插件搜索框，由于个人项目采用Less动态样式，因此我搜索Less，选择插件，能够高亮Less语法标示，比较方便开发：

　　好啦，开发工具已经配置好啦，接下来就开始对项目进行自动化构建配置，我用的是gulp，注意，国内最好用cnpm，防止被墙，好啦，接下来附上我本身的配置信息：

{ "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"]); });

　　好啦，基本的开发工具和构建配置已经ok啦，接下来就能够流畅撸码啦！