前端-自動化構建

　　在公司搞前端一直用的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啦，接下來就能夠流暢擼碼啦！