一路摇到顶
一路摇到顶

web前端开发环境搭建

使用到的工具：

  • NodeJs （组件管理）
  • GIT （代码管理）
  • browserify （模块化）
  • Sass (CSS预编译工具)
  • Grunt （自动化工具）
  1. 在文件夹下新建3个空文件夹
build,src,test
  1. 环境初始化（其实就是生成一个package.json）
npm init

2.安装Grunt

npm install grunt --save-dev
  1. 新建Gruntfile.js
module.exports = function(grunt) {

  // Project configuration.,项目配置，组件配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
  
  });

  // Load the plugin that provides the "uglify" task.
  // grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  //定义动作
  grunt.registerTask('default', []);

};

4.执行grunt,是否出行done，则grunt配置完成

5.grunt常用插件

contrib- 前缀是grunt官方团队提供的插件，否知是第三方
Contrib-jshint——javascript语法错误检查；
Contrib-watch——实时监控文件变化、调用相应的任务重新执行；
Contrib-clean——清空文件、文件夹；
Contrib-uglify——压缩javascript代码
Contrib-copy——复制文件、文件夹
Contrib-concat——合并多个文件的代码到一个文件中
karma——前端自动化测试工具

6.使用uglify插件

npm install grunt-contrib-uglify --save-dev

修改Gruntfile.js文件

  // Project configuration.,项目配置，组件配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
          options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/*.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });
grunt.loadNpmTasks('grunt-contrib-uglify);
  grunt.registerTask('default', ['uglify']);
  1. 执行grunt，自动启用uglify插件
  • 实验，在src下新建test.js
  • 运行grunt，查看是否生成压缩后的文件
    8.使用watch，监听变化，实现自动化
安装
npm install grunt-contrib-watch --save-dev
配置
 watch:{
        build:{
            files:['src/*.js','src/*.css'],
            tasks:['uglify'],//发生变化执行uglify
            options:{spawn:false}
        }
    }
载入
  grunt.loadNpmTasks('grunt-contrib-watch');
执行
  grunt.registerTask('default', ['uglify','watch']);

9.执行grunt,现在去修改test.js,会执行设定好的动作，control+c停止。

10.最终的Gruntfile.js

module.exports = function(grunt) {

  // Project configuration.,项目配置，组件配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
          options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/*.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    },
    watch:{
        build:{
            files:['src/*.js','src/*.css'],
            tasks:['uglify'],//发生变化执行uglify
            options:{spawn:false}
        }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');


  // Default task(s).
  //定义动作
  grunt.registerTask('default', ['uglify','watch']);

};

11.最终的package.json文件

{
  "name": "html5",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-uglify": "^1.0.1",
    "grunt-contrib-watch": "^1.0.0"
  }
}

12.环境快速搭建

  • 安装好nodejs
  • 复制package.js Gruntfile.js
  • 新建文件夹 src,test,build
  • 执行 npm install
  • 执行 grunt
  • 我没有测试过，应该是可以的

你可能感兴趣的:(web前端开发环境搭建)