用grunt进行ES6转换,再用uglify压缩所有js实例 :http://www.cnblogs.com/moqiutao/p/5316336.html

1.首先安装node.js

去官网下载exe执行文件安装即可,安装完成后自带有npm管理。

2.安装grunt CLI

在项目根文件夹下执行如下代码:

npm install -g grunt-cli

 3.安装Grunt

npm install grunt --save-dev

 

4.配置Gruntfile.js

首先需要往项目里添加两个文件:package.jsonGruntfile.js;

如果你从其它项目中拷贝了这2个文件,可以执行npm install直接安装。

其中package.json文件的自动生成:

npm init

grunt.initConfig方法

用于模块配置,它接受一个对象作为参数。该对象的成员与使用的同名模块一一对应。

每个目标的具体设置,需要参考该模板的文档。就cssmin来讲,minify目标的参数具体含义如下:

  • expand:如果设为true,就表示下面文件名的占位符(即*号)都要扩展成具体的文件名。
  • cwd:需要处理的文件(input)所在的目录。
  • src:表示需要处理的文件。如果采用数组形式,数组的每一项就是一个文件名,可以使用通配符。
  • dest:表示处理后的文件名或所在目录。
  • ext:表示处理后的文件后缀名。

grunt常用函数

grunt.initConfig:定义各种模块的参数,每一个成员项对应一个同名模块。
grunt.loadNpmTasks:加载完成任务所需的模块。
grunt.registerTask:定义具体的任务。第一个参数为任务名,第二个参数是一个数组, 表示该任务需要依次使用的模块。

grunt常用模块

  • grunt-contrib-clean:删除文件。
  • grunt-contrib-compass:使用compass编译sass文件。
  • grunt-contrib-concat:合并文件。
  • grunt-contrib-copy:复制文件。
  • grunt-contrib-cssmin:压缩以及合并CSS文件。
  • grunt-contrib-imagemin:图像压缩模块。
  • grunt-contrib-jshint:检查JavaScript语法。
  • grunt-contrib-uglify:压缩以及合并JavaScript文件。
  • grunt-contrib-watch:监视文件变动,做出相应动作。

常用模块插件的安装方式,进入插件地址搜索想用的插件名称,然后进去查看使用方式,这儿不做介绍。

插件地址:http://gruntjs.com/plugins

5.配置实例

实例需求:需要先把ES6语法转换成ES5,然后通过uglify压缩所有的js。(所有文件在src目录下,里面需要转换的ES6的语法只在某个文件夹下指定文件t.js)。

思路如下:先拷贝所有的src里面的内容到dist文件夹下,在dist文件夹下进行语法转换,再进行js压缩,其中Gruntfile.js配置如下:

    module.exports = function(grunt) {  
      //配置参数  
    grunt.initConfig({  
        pkg: grunt.file.readJSON('package.json'),watch: {
           js: {
            files:['src/**/*.js'],tasks:['default'false}
          },babel:{
              files:'src/**/*.js',tasks:['babel']
          }
        },jshint:{
            build:['src/**/*.js'检测JS代码错误要根据此文件的设置规范进行检测,可以自己修改规则
            }
        },copy: {
          main: {
            expand: true'**']
                
            },dist: {
                files: [{
                   expand:js目录下
                   src:['**/t.js'],1)">所有js文件
                   dest:'dist/'  输出到此目录下
                 }] 
            }
        },uglify: {  
            options: {
             mangle: true,1)">混淆变量名
             comments: 'false' false(删除全部注释),some(保留@preserve @license @cc_on等注释)
            },my_target: {
                 files: [{
                   expand:js目录下
                   src:['**/*.js'],1)">                 }] 
            } 
        }
    });  
      
      载入uglify插件,压缩js 
      grunt.loadNpmTasks('grunt-contrib-copy');
      grunt.loadNpmTasks('grunt-babel');
      grunt.loadNpmTasks('grunt-contrib-jshint');
      grunt.loadNpmTasks('grunt-contrib-uglify'); 
      grunt.loadNpmTasks('grunt-contrib-watch'注册任务  
      grunt.registerTask('default',['copy','babel','uglify']);
      grunt.registerTask('watcher',['watch']);
    }  

当然还有一种思路如下:

首先把需要转换的ES6的js通过src目录下,转换到一个中间目录,如babel目录下,然后压缩操作执行两部分,第一部分就是除原src路径下的ES6的js,其它都压缩到dist中,第二部分就是压缩中间目录label下的js,如下配置,只写部分:

babel: {
        options: {
            sourceMap: ]   
        },dist: {
            files: [{
               expand:js目录下
               src:['**/t.js'],1)">所有js文件
               dest:'babel/'               }] 
        }
    },uglify: {  
        options: {
         mangle: 混淆变量名
         comments: 'false'         },my_target: {
             files: [{
               expand:js目录下
               src:['**/*.js'],1)">所有js文件
               dest:'dist/'               }] 
        },allother:{
          files: [{
               expand:js目录下
               src:['**/*.js','!t.js'],1)">             }] 
        }
    }

 如果需要详细了解用grunt搭建web前端开发环境,地址:http://www.cnblogs.com/moqiutao/p/5316336.html

相关文章

一准备工作umi为react的一个封装比较nice的脚手架。优点当然...
webpack在引入两个依赖的包时,可能需要使用shimming,意思是...
  Happypack (plugin)多线程使用loader编译文件treeshaki...
一目录结构├──build//构建相关├──config//配置相关├─...
接着第一节的demo现在我们尝试整合一些其他资源,比如图像,...
webpack的打包原理识别入口文件通过逐层识别模块依赖(Common...