我的前端工作流

這裏分享一下我的工作流。

Bower

一個包管理器

項目需要用到 bootstrap，angularjs，jquery等等的東西，每次要下載就打開百度然後進入官網找對應版本下載？
no,這裏可以更方便。

首先通過npm安裝Bower，然後配置項目，完成後，只要 bower install jquery 即可自動安裝到項目中來。

Grunt

JavaScript 世界的構建工具

用到的插件

concat

用來合併文件，我基本都是用來對js文件進行合併。

concat: {
    options: {
        sourceMap: true
    },
    angular: {
        src: [
            'src/js/app.js',
            'src/js/**/*.js'
        ],
        dest: 'public/js/views/app.js'
    }
},

less

自從使用了less，再也不想寫css了，因爲多層選擇器實在是蛋疼。

less: {
    main: {
        options: {
            // 嚴格的數字模式，當啓用的時候，數字需要使用括號。
            strictMath: true,
            // 啓用 source map
            sourceMap: true,
            // 直接將源文件寫入map文件中，而不是引用
            // outputSourceFiles: true,
            // 指定 source map 路徑
            sourceMapURL: '<%= pkg.name %>.css.map',
        },
        src: 'src/less/<%= pkg.name %>.less',
        dest: 'public/css/<%= pkg.name %>.css'
    }
},

這個我就不介紹了，如果你不知道，哦No。。
只是這裏要注意一點，就是調試的時候，如果只用css文件是很難調試的，因爲代碼都在less文件裏呢，所以一定要開啓source map選項，這樣就能方便的在瀏覽器裏定位到源代碼的位置。
聽說好像只有chrome支持。

autoprefixer

這是一個非常棒的插件，可以自動幫你補充瀏覽器的兼容樣式。

autoprefixer: {
    options:{
        // 自動更新 sourcemap 
        map:true
    },
    your_target: {
        src:'public/css/app.pre.css',
        dest:'public/css/app.css' 
    },
},

大家都知道，有些css屬性在不同的瀏覽器上是需要加特定前綴的。
比如這樣一個樣式。

.a{
    display:flex;
}

爲了達到最好的兼容效果，你可能需要寫成這樣

.a{
    display:-webkit-flex;
    display:-moz-box;
    display:-ms-flexbox;
    display:flex;
}

這個插件就是幫我們做這些處理的，讓你只需要專注於css本身而不需要考慮兼容寫法。

watch

監聽文件狀態，當指定文件被更改時，可以觸發指定任務。

watch: {
    scripts: {
        files: 'src/js/**/*.js',
        tasks: ['concat:angular']
    },
    styles: {
        files: 'src/less/**/*.less',
        tasks: ['less','autoprefixer']
    }
},

browserSync

自動同步刷新瀏覽器。

browserSync: {
   dev: {
       bsFiles: {
           src: [
            'public/css/*.css',
            'public/html/*.html'
           ]
       },
       options: {
           proxy: 'localhost:3001',
           port: 3001,
           browser: 'google chrome',
           watchTask: true,
       }
   }
},

常常是這樣，我們每做完一次更改(.css,.html,*.js)等等，想去瀏覽器看看效果，不得不打開瀏覽器點一下刷新按鈕。

自從擁有了它！！解放你的雙手！！
自動檢測文件的更改，自動刷新瀏覽器！！
效率提高40%有木有！！

---

我習慣這樣用
主要是watch任務

監聽.less文件，
然後通過 less 編譯成 *.pre.css ,
然後再通過 autoprefixer 編譯成 *.css 文件，
最終我們使用 *.css 文件即可。

監聽.js文件（src目錄），
然後通過concat合併成一個js文件