我的前端工作流

最新推荐文章于 2025-08-05 10:53:53 发布

涛锅

最新推荐文章于 2025-08-05 10:53:53 发布

阅读量763

点赞数

CC 4.0 BY-SA版权

分类专栏：编码习惯文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq807081817/article/details/50889693

编码习惯专栏收录该内容

4 篇文章

订阅专栏

这里分享一下我的工作流。

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,
       }
   }
},